Onclick Show / Hide Multiple Divs Jquery

Question

I need to create navigation that shows / hides multiple divs.

Here is what I need to be able to do: If a user clicks on any of the \"options

Answer 1

EDIT: for a non JQuery solution try this:

function showHide(element) { 
     var field = document.getElementById(element); 
     if (element) { 
          if (field.style.display == 'none') { 
                field.style.display = 'block'; 
          } else { 
                field.style.display = 'none'; 
          } 
     } 
}

That would be your code to show and hide in your JS

<div class="buttons">
    <button class="showSingle" target="1" onClick="showHide(div1);">Option 1</button>
    <button class="showSingle" target="2" onClick="showHide(div2);">Option 2</button>
    <button class="showSingle" target="3" onClick="showHide(div3);">Option 3</button>
    <button class="showSingle" target="4" onClick="showHide(div4);">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>​

That should get you started :-)

Totally missed the Jquery my bad

Answer 2

See http://jsfiddle.net/XwN2L/415/ . It removes the class "selected" from all .showSingle anchors, then adds the class "selected" to the clicked anchor. Also, it handles the onload problem by hiding all the .targetDivs and showing only the first one.

EDIT: Should highlight the first option in red on page load too. http://jsfiddle.net/XwN2L/421/

Answer 3

$('.showSingle').click(function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected')
   $(this).addClass('selected');           
});

var active_link = 1; // Change this value to set the active link
$('a[target='+active_link+']').trigger('click');​

Answer 4

You should use data attributes, as just target is'nt really valid. I changed it to data-target and did:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

FIDDLE

on() will only work in jQuery 1.7+, so if using an older version of jQuery (your fiddle is), stick with click().

Answer 5

For your first trouble you can add the following two lines to your click event:

    $(".buttons .selected").removeClass("selected");
    $(this).addClass("selected"); 

Or as Irrelepant says (a better way actually):

$(this).addClass('selected').siblings().removeClass('selected');