CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 683

Making text visible again after it's been hidden by a button click

I've currently got a button that drops down and is meant to show new text / hide the old header. I've currently got my code set up as 

$('a.btn-navbar').click(function(){
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
             $('#headerText').css('visibility','hidden');
        });

how would I go about reenabling headertext when the button is clicked again to hide the drop down menu button?

I was thinking about using toggle but I'm not 100% sure on it works and thought it would be best to get an opinion.

Edit. I used the .toggle() to get it to work. The issue I had before why I wasn't using this was that it slightly overlapped the button I needed for the drop down. Adding z-index:-1; allowed me to get around this.

Upvotes: 0

Views: 142

Answers (3)

Vishav B Kaith
Vishav B Kaith

Reputation: 139

Use (:visible) selector $('a.btn-navbar').click(function(){

         if ( $("#headerText").is(":visible") ) 
          {
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
            $('#headerText').hide();
          }else{
            $('#headerText').show();
         }
    });

Upvotes: 1

Tit-oOo
Tit-oOo

Reputation: 208

Here is an example : 

$('a.btn-navbar').click(function(){
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
             $('#headerText').toggle();
        });

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to write a condition with ternary operator,

$('a.btn-navbar').click(function(){
   var header = $('#headerText');
   header.css('visibility',header.css('visibility') === 'hidden' ? 'visible' : 'hidden');
});

or do it with .toggleClass(),

to write a condition with ternary operator,

.visible { visibility:visible; }
.hidden { visibility:hidden; }

$('a.btn-navbar').click(function(){
   var header = $('#headerText');
   header.toggleClass('hidden visible');
});

Upvotes: 1

Related Questions