html - Jquery - Change Glyphicon on click -
i have collapsing div , cannot seem make glyphicon change existing jquery have.
i want change glyphicon-plus glyphicon-minus not seem work 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> <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. sample text.</small></p> </div> </div> </div>
i use jquery.toggleclass function , add 2 classes toggling between.
would 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; }); });
Comments
Post a Comment