CODEWITHSUNDEEP
jqueryhtmlcss
Filth
Filth

Reputation: 3228

Onclick Show / Hide Multiple Divs Jquery

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" I need a class named "selected" associated to the current selected or chosen item within the nav - this means adding a class to the anchor. You will see there is CSS styling for the class "selected" in my example below.

View current progress

I am also having trouble trying to have either "option 1" or "option 2" already selected onload so that all of the divs do not appear - Onload I need only one div to appear with the correct "option" "selected" if that makes sense.

All suggestions welcome!

Upvotes: 2

Views: 22350

Answers (5)

Joe Posorski
Joe Posorski

Reputation: 7

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

Upvotes: 1

user1502531
user1502531

Reputation: 93

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');

Upvotes: 0

adeneo
adeneo

Reputation: 318172

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().

Upvotes: 3

irrelephant
irrelephant

Reputation: 4111

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/

Upvotes: 1

the_wizard
the_wizard

Reputation: 592

$('.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');​

Upvotes: 1

Related Questions