The essence is this - there are 4 links and 4 hidden divas, conditionally:

<a href="#" id="link1"> Text </a> <a href="#" id="link2"> Text2 </a> <a href="#" id="link3"> Text3 </a> <a href="#" id="link4"> Text4 </a>

<div id = "div1" class = "bar"> </ div> <div id = "div2" class = "bar"> </ div> <div id = "div3" class = "bar"> </ div > <div id = "div4" class = "bar"> </ div>

The class is written display: none; How to make the corresponding div appear when you click on the link, but the rest remain hidden, and when you click on another link, another div opens and the previous div disappears? I've been trying to do something for a few days, nothing's working out.

1 answer 1

and here is how you describe it and do it:

$('a').click(function(){$('.bar').eq($(this).index()).show().siblings('.bar').hide()})
  • the only thing to compare links with blocks is better in some more reliable way, for example, writing block id in href links - Elena Levina
  • does not work, when you open the page all the blocks appear, then everything disappears and only the first one remains. Does not respond to clicking on other links - RageXL
  • naturally does not work. You only have a general principle suggested. Show your sample code on jsfiddle. - Elena Levina
  • In general, I did this example, everything works, but 1 question, how to make the block hide again after a second click? jsfiddle.net/winns/9AUuk - RageXL
  • you would understand how this all works, and not google ready-made solutions. After all, in fact, everything is extremely simple: jsfiddle.net/9AUuk/2 - Elena Levina