Using jQuery for hiding/unhiding div contents according to user interaction

Question

I have the following HTML structure

<div class="store"><a href="#">GERMANY</a></div>
<div class="store_details">
   <p>Stores in Germany</p>
</div>
</div>
<div class="store"><a href="#">ITALY</a></div>
<div class="store_details">
   <p>Stores in Italy</p>
</div>
</div>
<div class="store"><a href="#">FRANCE</a></div>
<div class="store_details">
   <p>Stores in France</p>
</div>
</div>

What I would like to do is to write a jQuery script that at first will hide the contents of "store_details" div for each store. When a user clicks on a store name (country), the script has to display that "store_details" div and hide the contents of other "store_details" divs.

I managed to do the initial hiding of divs, but I got stuck with the other steps.

Any help is appreciated.

Thanks.

Can you post your current jQuery code? – flec Oct 20 '12 at 16:22 — flec, Oct 20 '12 at 16:22
You have stray ``s in your markup – Musa Oct 20 '12 at 16:24 — Musa, Oct 20 '12 at 16:24
Please provide a Fiddle @ jsfiddle.net – Luc Morin Oct 20 '12 at 16:24 — Luc Morin, Oct 20 '12 at 16:24

score 1 · Accepted Answer · answered Oct 20 '12 at 16:27

1

Code :

$(document).ready(function(){
    $(".store_details").hide();
    $(".store a").click(function() {
        $(".store_details").hide();
        $(this).parent().next().show();
    });
});

Working fiddle

answered Oct 20 '12 at 16:27

bhb

2,476
3
17
32

score 0 · Answer 2 · answered Oct 20 '12 at 16:24

0

You should be able to get your answer by searching. Buy anyway, this should get you going

css:

.store_details { display: none; }

js:

$(function(){
    $('.store a').click(function(){ //listen for link clicks
         $('.store_details').hide(); //hide all store details
         $(this).closest('div.store').next('div.store_details').show(); //show the selected detail div
    });
});

answered Oct 20 '12 at 16:24

Johan

35,120
54
178
293

Better practice, use on('click', ... ) instead of click – r_31415 Oct 20 '12 at 16:29
@RobertSmith - i dont really think so. Can you please explain? – bhb Oct 20 '12 at 16:34
In latter versions of Jquery, 'on' is the preferred way to attach events. – r_31415 Oct 20 '12 at 16:37
@RobertSmith - check [this](http://stackoverflow.com/questions/8601482/jquery-on-vs-click-methods) :) – bhb Oct 20 '12 at 16:40
@bhb ;-) If it one should be used preferably over the other, it should be clearly stated in their API docs. – Luc Morin Oct 20 '12 at 16:43
Well, 'click' is a convenience method as it's calling 'on' anyway, so why don't we call 'on' directly? A tiny bit faster and more flexible to future modifications. – r_31415 Oct 20 '12 at 16:50
@mrlucmorin and Robert Smith - i agree :) – bhb Oct 20 '12 at 16:51

score 0 · Answer 3 · answered Oct 20 '12 at 16:26

Try this:

$(document).ready(function(){          /* when the page has loaded in the browser... */
   $('.store').click(function(){ /* ...bind a click event to the div element... */
    $('.store').removeClass('store_details'); /* When clicked, remove any 'store_details' class off boxSet elements */
    $(this).next().addClass('store_details'); /* ...and add the 'hilite' class to the clicked element */
});
});

score 0 · Answer 4 · answered Oct 20 '12 at 16:46

A more robust way (i.e. using children instead of next, correcting markup):

CodePen: http://codepen.io/anon/pen/idcro

$(function(){
    $('.store a').on('click', function(){
        var store_details = $('.store_details').hide();
        var l = $(this).parent().children('.store_details');
        l.show();
    });    
})();

Using jQuery for hiding/unhiding div contents according to user interaction

4 Answers4