Menu
I have a simple script in jquery to toggle a div (show and hide) when a <p> is clicked (I'm using bootstrap).
HTML:
<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p> <div id="display_advance"> <p>This is the advance search</p> </div> JS:
$('#click_advance').click(function(){ $('#display_advance').toggle('1000'); $(this).html('<i class="icon-circle-arrow-up"></i> Advanced search'); });
So, when I click for the first time the icon changes from down to up but obviously when I click "click_advance" again the icon doesn't change back. So I want the toggle effect like the show and hide; but I'm cluless on how to do it with an icon.
943
So select the element and toggle the class to change the icons. Check the state and set the text. Other option is just add a class to the wrapper and change what elements are shown.
$('#click_advance'). click(function(){ $('#display_advance'). toggle('1000'); $(this). html('<i class="icon-circle-arrow-up"></i> Advanced search');
To change the icon button color on press, add a highlightColor property to the IconButton widget. Inside the highlightColor assign the color of your choice.
We can do that by using the HTML label tag and HTML input type = checkbox. HTML code: The HTML code is used to create a structure of toggle switch. Since it does not contain CSS so it is just a simple structure.
Instead of overwriting the html every time, just toggle the class.
$('#click_advance').click(function() { $('#display_advance').toggle('1000'); $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down"); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
