PDA

View Full Version : Whish is best showhide or toggle?



JebaQpt
05-06-2014, 02:03 PM
The thing is I used to display a list of quiz questions with answers.So for that whether which is best to use ?
The javascript code is below

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

or

<script type="text/javascript">

function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

</script>

jmrker
05-07-2014, 04:55 AM
This is the WRONG section of the forum to post questions.
This section is for complete or working snippets of code.

Both of your functions do the same thing, just with different function names.
But neither if very good if the style.display has not been initialized to 'block' or 'none'.

Consider this:
If the style.display value is '', then the element will be visible.
When you toggle the element it will change to 'block' and continue to be visible
Finally, if you click a 3rd time, it will finally become hidden.

Your code does not take into account that the style.display may also be '' or 'visible' or 'hidden'.
You would still have the same problem with the initial clicks.

Should you choose a particular style.display, then a better way to insure that the first click
will cause a change would be to do...


<script type="text/javascript">

function toggle(id) {
var e = document.getElementById(id);
if ( (e.style.display == '') || (e.style.display == 'block') )
{ e.style.display = 'none'; } else { e.style.display = 'block'; }
}
</script>




Couple of other points FYI.

You should enclose your scripts between [ code] and [ /code] tags (without the spaces)
to make it easier to spot, copy, test, revise and/or debug. And it retains the formatting of your code.

Finally <script language="JavaScript"> is an archaic tag.
You should use <script type="text/javascript"> or just <script> if you don't use any other script language.

rnd me
05-07-2014, 08:43 PM
<script type="text/javascript">

function toggle(id) {
var e = document.getElementById(id);
if ( (e.style.display == '') || (e.style.display == 'block') )
{ e.style.display = 'none'; } else { e.style.display = 'block'; }
}
</script>





i wouldn't recommend that except to show/hide paragraphs of text, or other block appearance elements.
It would be better to null out or delete the display style property because setting it "block" is plain wrong for from inputs, images, list items, anchors, etc...
you can keep a whitelist of tagNames, or just null-out the display:none, which is what i usually do...

glenngv
05-07-2014, 10:32 PM
Shorter version:


function toggle(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display === 'none') ? '' : 'none';
}

Note that will only work if the display property is inline, you will need to use getComputedStyle or currentStyle to get the display property defined in either CSS rule or inline.



function getStyle(obj) {
//override function to do object detection only once
window.getStyle = (window.getComputedStyle) ? window.getComputedStyle : function(o) { return o.currentStyle; };
return getStyle(obj);
}

function toggle(id) {
var e = document.getElementById(id);
e.style.display = (getStyle(e).display === 'none') ? '' : 'none';
}

jmrker
05-07-2014, 11:10 PM
i wouldn't recommend that except to show/hide paragraphs of text, or other block appearance elements.
It would be better to null out or delete the display style property because setting it "block" is plain wrong for from inputs, images, list items, anchors, etc...
you can keep a whitelist of tagNames, or just null-out the display:none, which is what i usually do...

OK, but FMI, by null do you mean '' or 'null' or just null (without the quotes)?

Like this?


<script type="text/javascript">

function toggle(id) {
var e = document.getElementById(id);
if ( (e.style.display == '') || (e.style.display == 'block') )
{ e.style.display = 'none'; } else { e.style.display = ''; }
}
</script>


or do you mean something like this?


<script type="text/javascript">

function toggle(id) {
var e = document.getElementById(id);
if ( e.style.display != '') { e.style.display = 'none'; } else { e.style.display = ''; }
}
</script>


How would you retain the initial or current settings of the CSS if you set it to 'none' or null?
For example, if the CSS has initially display:inline; how should that be handled after the toggle to 'none'? Surely not set to 'block' or ''.

Or are you saying each toggle function should be specific to the particular display styles used by the particular element?