Question

In an app i’m working on it uses jQuery toggle mostly to open and close divs. I know the same effect can be done using show and hide. I have an example in this jsfiddle. Is either method better than the other? Or is there another method more efficient and compliant to open and close divs only allowing one to be open at a time? Thanks

Also i’m moving my app over to use Twitter Bootstrap if it matters

<div id="wrapper"> Toggle Method
<div id="action-buttons">
    <a class="button" onclick="$('#boxone').toggle();$('#boxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#boxtwo').toggle();$('#boxone').hide();return false;"><span>Two</span></a>
</div>
<div id="boxone" style="display:none;">Box One</div>
<div id="boxtwo" style="display:none;">Box Two</div>
</div>
<div id="wrapper"> Show Hide Method
<div id="action-buttons">
    <a class="button" onclick="$('#showboxone').show();$('#showboxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#showboxtwo').show();$('#showboxone').hide();return false;"><span>Two</span></a>
</div>
<div id="showboxone" style="display:none;">Box One</div>
<div id="showboxtwo" style="display:none;">Box Two</div>
</div>

​

Answer 1

I would suggest removing the style and actions from the HTML part.

And don’t try to optimize it : there is no performance problems on such basic jQuery actions and the only thing that matter is the readability of the code : be sure your HTML, CSS and Javascript are obvious. Don’t try to make too smart javascript : if you can’t instantly see what it does, there are risks of maintainability problems. And rely on id, classes and specific attributes instead of order properties that won’t keep up when you change your page.

Here’s how I changed your fiddle : http://jsfiddle.net/PRVm8/

HTML :

<div id="wrapper"> Toggle Method
<div id="action-buttons">
    <span class="button1"  target=boxone>One</span>
    <span class="button1"  target=boxtwo>Two</span>
</div>
<div id="boxone" class=box1>Box One</div>
<div id="boxtwo" class=box1>Box Two</div>
</div>

<div id="wrapper"> Show Hide Method
<div id="action-buttons">
    <a class="button2"  target=boxone><span>One</span></a>
    <a class="button2" target=boxtwo><span>Two</span></a>
</div>
<div id="showboxone" class=box2>Box One</div>
<div id="showboxtwo" class=box2>Box Two</div>
</div>
​

Javascript :

$('.button1[target="boxone"]').click(function(){
    $('#boxtwo').hide();
    $('#boxone').toggle();
});
$('.button1[target="boxtwo"]').click(function(){
    $('#boxone').hide();
    $('#boxtwo').toggle();
});
$('.button2').click(function(){
    $('.box2').hide();
    $('#show'+$(this).attr('target')).show();
});

​