Recently, I decided to play around with bootstrap's glyphicons. By utilizing Jquery's addClass and removeClass functions, I tried to smoothly transition from one glyphicon to another.
Here is the code snippet:
var glyphOn = true; //The glyphOn variable keeps track of whether .navList is visible or not.
$('.glyphicon').click(function() {
if (glyphOn == true) {
$('.navList').fadeIn(500).addClass('glyphicon-remove').removeClass('glyphicon-align-justify');
glyphOn = false;
} else {
$('.navList').fadeOut(500);
glyphOn = true;
}
});/*This CSS is mainly for demonstration purposes and can be disregarded. The key point here is that .navList has display:none;*/
.glyphicon {
background-color: gray;
padding: 15px;
font-size: 2em;
color: white;
cursor: pointer;
}
.navList {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--A sample example using two commonly used glyphicons in Mobile Web Development.-->
<p><span class="glyphicon glyphicon-align-justify"><!--As per bootstrap documentation, the content inside this tag should be empty.--></span>
</p>
<ul class="navList">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>I apologize if this seems like a simple issue, but despite my efforts to find a solution online, I haven't been successful.
To clarify, let me state the objective and challenge:
GOAL: To effectively swap glyphicons within an element. (Specifically, switching between a Mobile Menu Glyph and an Exit Glyph.)
PROBLEM: The provided code snippet doesn't perform as intended.
Thank you in advance to anyone who provides insights and solutions :)