CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fiido93
Fiido93

Reputation: 1978

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

Upvotes: 0

Views: 56

Answers (4)

Ram_UI
Ram_UI

Reputation: 485

try this.

$( ".open" ).click(function() {
    $(this).next(".ranch").slideToggle( "slow", function() {
    // Animation complete.
  });
});
.content{
  width:400px;
  background-color:orange
}


.ranch{
  display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

Upvotes: 1

JustinasT
JustinasT

Reputation: 633

This will do it. You have to use this to toggle only one item.

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

Upvotes: 1

Gerard
Gerard

Reputation: 15786

You need to handle the button within each div separately

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

Upvotes: 1

user6383968
user6383968

Reputation: 71

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

Upvotes: 1

Related Questions