CODEWITHSUNDEEP
jqueryhtmlcssshowhidden
Rendy Juvi
Rendy Juvi

Reputation: 65

Show / Hidden Content

I need help on this toogle function. How to make the name change, for example : when the "box" show it only display SHOW and when the "box" hidden, it only display HIDE.

Now Show / Hide will display on both Show and Hidden.

  
$(document).ready(function(){
    $(".show").click(function(){
        $(".apaansi").toggle();
    });
});
.box {
  border:1px solid #dedede;
  padding:1%;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="uniquename">
  
  <div class="apaansi">
  
    <div class="box col-lg-12 col-md-12 col-sm-12 col-xs-12"> Search </div>
  
  </div>
  
   
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#" class="show show-car"> Show / Hide <i class="fa fa-chevron-down"></i> </a>
</div>
  
</div>

Upvotes: 2

Views: 103

Answers (2)

Sam Teng Wong
Sam Teng Wong

Reputation: 2439

you can simply use a counter for that..

here's a fiddle: https://jsfiddle.net/LL5xhapL/

   $counter = 0;
   $(".show").click(function(){
        if($counter % 2)
        {
          $(this).html('Hide <i class="fa fa-chevron-down"></i>');
        }else{
          $(this).html('Show <i class="fa fa-chevron-right"></i>');
          $counter = 0;
        }
        $counter++;
        $(".apaansi").toggle();
    });

Upvotes: 1

guradio
guradio

Reputation: 15555

$(document).ready(function() {
  $(".show").click(function() {
    $(".apaansi").toggle();
    $('.apaansi').css('display') == 'none' ? $(this).text('Show') : $(this).text('Hide'); //show hide base on css
  });
});
.box {
  border: 1px solid #dedede;
  padding: 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="uniquename">

  <div class="apaansi">

    <div class="box col-lg-12 col-md-12 col-sm-12 col-xs-12">Search</div>

  </div>


  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <a href="#" class="show show-car"> Hide <i class="fa fa-chevron-down"></i> </a>
  </div>

</div>

Set the default text to hide since it is showing then change base on display of the div

Upvotes: 0

Related Questions