CODEWITHSUNDEEP
javascriptjquery
Devon
Devon

Reputation: 89

Jquery How to activate div show/hide

I'm pretty new to Jquery and Javascript and was am working on a project that I am sure has a much simpler way of coming to the same functionality. The following is a simplified version of what I am doing:

HTML

<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>

<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>

Jquery

$(".link1").click(function(){
    $("#div2, #div3").hide();
    $("#div1").show();
    $(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});

$(".link2").click(function(){
    $("#div1, #div3").hide();
    $("#div2").show();
    $(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});

$(".link3").click(function(){
    $("#div1, #div2").hide();
    $("#div3").show();
    $(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});

So basically each link is immediately hiding both non-corresponding divs, even if they are not necessarily visible and also removes the active class on the other links even if they are not applied (to ensure that they are removed) then shows the corresponding div and adds an active class to the link. I am wondering if there is an easier way to create this functionality without having to hide all other divs and remove all active classes to ensure that nothing but the one I want visible is showing.

Thanks so much for any help you can provide!!

Upvotes: 2

Views: 14544

Answers (3)

David Hu
David Hu

Reputation: 3136

If you group your elements like

<div id="links">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

<div id="content">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
</div>

And add the CSS

#content div {
    display: none;
}

Then you could do

$('#links').children().click(function() {

    // Get the index of the link that was clicked on
    var index = $('#links').children().index(this);

    // Hide all content except that corresponding to the clicked link
    $('#content').children().hide().eq(index).show();               

    // Remove active class from all links except that which was clicked        
    $('#links').children().removeClass('active');
    $(this).addClass('active');        

});

Now you don't need all those different IDs and classes, and less code repetition in your HTML. :)

JSFiddle: http://jsfiddle.net/divad12/mMSGf/2/

Upvotes: 2

user319198
user319198

Reputation:

Try below example. please do required changes.

Jquery:

function showonlyone(thechosenone) {
     $('div[name|="newboxes"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

Html:

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
      </td>
   </tr>
</table>

Fore more examples Please refer link :

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

Upvotes: 1

Scoobler
Scoobler

Reputation: 9719

You could change your HTML a little to make things easier, for example:

<a class="link" href="#" rel="div1">Link 1</a>
<a class="link" href="#" rel="div2">Link 2</a>
<a class="link" href="#" rel="div3">Link 3</a>

<div class="content" id="div1">Content 1</div>
<div class="content" id="div2">Content 2</div>
<div class="content" id="div3">Content 3</div>

And then use a simple function to perform what I think you want:

$('.link').click(function(e){
    e.preventDefault();
    var content = $(this).attr('rel');
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('.content').hide();
    $('#'+content).show();
});

See a demo here The code is also explained (commented) on the demo

Upvotes: 4

Related Questions