CODEWITHSUNDEEP
jqueryhtml
Austin Perez
Austin Perez

Reputation: 597

Jquery - Change Glyphicon on click

I have a collapsing div and cannot seem to make the glyphicon change with the existing Jquery that I have.

I want to change the glyphicon-plus to glyphicon-minus but does not seem to work for me.

$(function(){
    $('a.togglebtn').click(function(){
        if($("#toggleGlyph").length !== 0)
            $(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        else if ($("#toggleGlyph").length !== 0)
            $(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    });
});

$(function(){
$('a.togglebtn').click(function(){
        if($("#toggleText").text()==="Learn More"){
            $("#toggleText").html("Hide");}
        else {$("#toggleText").html("Learn More");}
        $('#myContent').stop().slideToggle(500);
        return false;
    });
  });
#mycontent { display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="lead p-color learn-button togglebtn">
  <small>
    <span class="glyphicon glyphicon-plus">
      </span>&nbsp;<span id="toggleText">Learn More</span>
  </small>
</a>
</div>

<div id="myContent" class="row row-offset" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1659

Answers (1)

Sean Wessell
Sean Wessell

Reputation: 3510

I use jQuery.toggleClass function and add the two classes i am toggling between.

Would look something like this...

$(function () {
    $('a.togglebtn').click(function () {
        $(".glyphicon").toggleClass("glyphicon-minus glyphicon-plus");
        $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More");
        $('#myContent').stop().slideToggle(500);
        return false;
    });
});

Upvotes: 1

Related Questions