jQuery toggle html not text on click

Question

I am trying to make a collapse type of thing using jQuery. Everything works fine except I want the text to toggle between "show more models" and "show less models", and I have no clue what to do. Here's the code:

<a id='roll-more' data-toggle="collapse" href=".roll-img2" class="text-dark">
  Show more models <span class="glyphicon glyphicon-chevron-down"></span>
</a>

$('#roll-more').toggle(function() {
    $('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>');
}, function() {
    $('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>');
});

EDIT Thanks for all the responses but I ended up doing this instead. Can't believe it was so simple :)))

 $('#roll-more').on('click',function() {
    if($('#roll-more').html() == 'Show more models <span class="glyphicon glyphicon-chevron-down"></span>') {
      $('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>')
    } else {
      $('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>')
    }
 });

amicoderozer · Accepted Answer · 2017-08-23 06:59:19Z

1

Or without using toggle function you can use a hidden input to store a value, like 0 or 1 to decide what to see based on this value. Here an example:

$('#roll-more').click(function() {
		if($("#toggle").val()==1){
    	$('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>');
      $('#toggle').val(0);
      }
      else{
    		$('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>');  
      	$('#toggle').val(1);
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="toggle" type="hidden" value="1"/>
<a id='roll-more' data-toggle="collapse" class="text-dark">
  Show more models <span class="glyphicon glyphicon-chevron-down"></span>
</a>

answered Aug 23, 2017 at 6:59

amicoderozer

2,1847 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhagchandani · Accepted Answer · 2017-08-23 06:49:14Z

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World</title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>  

   </head>

   <body>
  <span id='roll-more' class="text-dark" style="color:blue;cursor: pointer ">
  Show more models <span class="glyphicon glyphicon-chevron-down"></span>
</span><br/>
<span id="contanincll" style="display: none">
This is loreipus content. This is loreipus content. This is loreipus content. This is loreipus content. 

</span>


   </body>
  <script type="text/javascript">
  $(document).ready(function(){


$('#roll-more').on('click',function(e) {
e.preventDefault();
    $(this).html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>');
    $("#contanincll").toggle();
}, function() {
    $(this).html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>');
     $("#contanincll").toggle();
});
});
  </script>

</html>

RasmusGlenvig · Accepted Answer · 2017-08-23 06:54:01Z

1

You could try this:

$('#roll-more').click(function() {
  var link = $(this);
  $('.text').toggle('fast', function() {
      if ($(this).is(":visible")) {
      link.text('Show less models');
      } else { 
      link.text('Show more models');
     }
  });
});

.text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id='roll-more' data-toggle="collapse" href="#roll-img2" class="text-dark">
  Show more models <span class="glyphicon glyphicon-chevron-down"></span>
</a>

<div class="text">
  <p>text</p>
</div>

answered Aug 23, 2017 at 6:54

RasmusGlenvig

7656 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery toggle html not text on click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related