Reputation: 765
I want to hide link with jquery, if the user clicks button first time, link will hide(by adding class hidden), but should show if clicks button second time (remove class hidden). its a collapse-toggle feature. When I click button first time, it hides, but second time, does not work
HTML
<!--BUTTON -->
<div class="sidebar-collapse" style="" id="sidebar-collapse">
<a href="#" class="sidebar-collapse-icon with-animation">
<i class="entypo-menu"></i>
</a>
</div>
<a href="mysite_url" id="logo-title"> <br> My Site Name </a>
JAVASCRIPT
<script>
var logo_title = $('a#logo-title');
$('div#sidebar-collapse').click(function(){
logo_title.addClass('hidden-md hidden-lg cj_inspired');
if($('div#sidebar-collapse').click() && logo_title.hasClass('cj_inspired') ){
$('a#logo-title').removeClass('hidden-md hidden-lg cj_inspired');
}
})
</script>
Upvotes: 4
Views: 23776
Reputation: 253
Try it :
<script>
$(document).ready(function(){
$('.sidebar-collapse').click(function(){
$('#logo-title').toggle();
});
});
</script>
<div class="sidebar-collapse" style="" id="sidebar-collapse">
<a href="#" class="sidebar-collapse-icon with-animation">
<i class="entypo-menu"></i>Click
</a>
</div>
<a href="mysite_url" id="logo-title"> <br> My Site Name </a>
this will be work..
Upvotes: 2
Reputation: 5039
You can hide show link like this:
$('div#sidebar-collapse').click(function(){
if ( $("#logo-title").is(":visible") ) {
$("#logo-title").hide();
} else if ( $("#logo-title").is(":hidden") ) {
$("#logo-title").show();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sidebar-collapse" style="" id="sidebar-collapse">
<a href="#" class="sidebar-collapse-icon with-animation">
Click
<i class="entypo-menu"></i>
</a>
</div>
<a href="mysite_url" id="logo-title"> <br> My Site Name </a>
Upvotes: 4
Reputation: 1087
You can use jQuerys toggleClass()
to toggle a single class on/off of an element:
<script>
var logo_title = $('a#logo-title');
$('div#sidebar-collapse').click(function(){
logo_title.toggleClass('hidden-md').toggleClass('hidden-lg').toggleClass('cj_inspired');
});
</script>
It would be more elegant if you could use a single class to define the hidden styles.
Read more about toggleClass()
here.
Upvotes: 1