Fiido93 Fiido93 - 6 months ago 15
CSS Question

Hide and show 1 time clicking Jquery

The effect i got right now, it's shows the div paragraph . But when I add another div it's like all div shows paragraph together . How to control this by clicking 1 at the time?

Your help really appreciate.

HTML

<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>


JS

$('.open').on('click',function(event){
$('.ranch').toggle();
});


DEMO

Answer

You are using $('.ranch').toggle(); so you are selecting all paragraphs with class ranch and thus all paragraph are toggled when you click on it. A quick fix will be changing the line to $(this).siblings('.ranch').toggle();

The final JavaScript will be

 $('.open').on('click',function(event){
    $(this).siblings('.ranch').toggle();
 });

JSBin: http://jsbin.com/fiwosigike/1/edit?html,css,js,output