CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr_Bober
Mr_Bober

Reputation: 153

Different content showing on click

I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
         $(".slidingDiv").slideToggle();
    });

});

Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?

Here's My DEMO you can clearly see the problem.

EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.

Upvotes: 1

Views: 48

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You should use $(this) to refer to the current clicked div, and since you have the same class on the both of button you should check which one of them is clicked the perform the operation related with it :

$('.show_hide').click(function(){

    if($(this).text()=='Close') //Close Case
        $(this).closest('.slidingDiv').slideToggle();
    else //More Case
        $(this).closest('.news_button').next('.slidingDiv').slideToggle();

});

Hope this helps.

$(document).ready(function(){

  $(".slidingDiv").hide();
  $(".show_hide").show();

  $('.show_hide').click(function(){
    
    if($(this).text()=='Close') //Close Case
        $(this).closest('.slidingDiv').slideToggle();
    else //More Case
        $(this).closest('.news_button').next('.slidingDiv').slideToggle();

  });

});
.news_div_blue{
  background-color: #000000;
  color: #ffffff;
  margin: auto;
  margin-top: 10px;
  width: 1050px;
  height: 210px;
}

.news_div_blue a{
  color: #ffffff;
  margin-top: 0px;
}

.title_div_blue{
  z-index: 90;
  background-color: #000000;
  width: 1050px;
  height: 210px;
  margin-bottom: 0px;
}

.news_p_blue{
  margin-left: 10px;
  margin-top: 5px;
  width: 98%;
  color: #ffffff;

  font-family:"Myriad Pro","Trebuchet MS", sans-serif;
  color:#404040;
  font-size: 16px;

  text-align: justify;
}

/* HIDE - SHOW */
.slidingDiv {
  height: auto;
  width: 1048px;
  background-color: #E8f1fd;
  margin: auto;
  margin-top: 0px;
  z-index: 100;
  border: 1px solid #0E4186;
}

.show_hide {
  display:none;
}

/*******/
.news_image{
  float: left;
  width: 23%;
  border: 1px solid white;
  height: 150px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.news_title_blue{
  font-family:"Myriad Pro","Trebuchet MS", sans-serif;
  color: #ffffff;
  float: right;
  width: 73%;
  border: 1px solid white;
  height: 150px;
  text-align: justify;

  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.news_button{
  float: right;
  margin-right: 10px;
  margin-top: -40px;
}

/* Button Graphic */
.button_news {
  border-top: 1px solid #ffffff;
  background: #3663a3;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
  background: -webkit-linear-gradient(top, #0e4086, #3663a3);
  background: -moz-linear-gradient(top, #0e4086, #3663a3);
  background: -ms-linear-gradient(top, #0e4086, #3663a3);
  background: -o-linear-gradient(top, #0e4086, #3663a3);
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #ffffff;
  font-size: 15px;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  text-decoration: none;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
  <div class="title_div_blue">
    <div class="news_image"><img src=""/></div>
    <div class="news_title_blue">Title</div>
  </div> <!-- END title_div_blue -->

  <div class="news_button"><a href="#" class="show_hide"><button class="button_news">More</button></a></div>

  <div class="slidingDiv">
    <p class="news_p_blue">
      This is the first hidden text
      <br/>
      <br/>
      <br/>
      ...
    </p>
    <div class="news_button"><a href="#" class="show_hide"><button class="button_news">Close</button></a></div>
  </div> <!-- END slidingDiv -->

  <div class="title_div_blue">
    <div class="news_image"><img src=""/></div>
    <div class="news_title_blue">Title2</div>
  </div> <!-- END title_div_blue -->

  <div class="news_button"><a href="#" class="show_hide"><button class="button_news">More</button></a></div>

  <div class="slidingDiv">
    <p class="news_p_blue">
      This is the second hidden text
      <br/>
      <br/>
      <br/>
      ...
    </p>
    <div class="news_button"><a href="#" class="show_hide"><button class="button_news">Close</button></a></div>
  </div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->

Upvotes: 1

Related Questions