CODEWITHSUNDEEP
javascriptjqueryhtml
4Jean
4Jean

Reputation: 765

show / hide link with jquery

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

Answers (3)

Gur Janjua
Gur Janjua

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

Jayesh Chitroda
Jayesh Chitroda

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

Sinan Guclu
Sinan Guclu

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

Related Questions