Display on click jQuery

Question

I'm simply trying to make a button display when it's click. I'm fairly close, can anyone give me some advice on how to improve it, so it'll work?

jQuery

$(document).ready(function (){
    if( $("#btn").css('display', 'none') ) {
        $("#btn").click(function() ) {
            $("#info").css('display', 'block');
        )};
    } else { 
      $("#info").css('display', 'none'); 
    }       
});

    <div id="btn">
        <a class="help-a" href="#">help</a>
    </div> 
    <div id="info">
        <p>data goes here</p>
    </div>

Thanks

That's true, I tried a few approaches and wasn't getting anywhere. — nickhiebertdev, Jun 11 '15 at 20:47

score 4 · Accepted Answer · answered Jun 11 '15 at 20:45

4

You are looking for $.fn.toggle method: show if hidden, hide if visible:

$(document).ready(function () {
    $("#btn").click(function () {
        $("#info").toggle();
    });
});

answered Jun 11 '15 at 20:45

dfsq

191,768
25
236
258

I made a mistake in my code. the actual button is an anchor tag of . I tried $("#btn > a") and it doesn't seem to work. – nickhiebertdev Jun 11 '15 at 21:32
1

Can you post HTML code? – dfsq Jun 11 '15 at 21:37
Got it working! Thank you everyone! – nickhiebertdev Jun 11 '15 at 21:48

score 0 · Answer 2 · answered Jun 11 '15 at 20:44

0

$(document).ready(function (){

        $("#btn").click(function() ) {
             if( $("#btn").css('display') === "none" ) {
                   $("#info").css('display', 'block'); 
             } else { 
                   $("#info").css('display', 'none'); 
             }       
        )};

});

You were doing it right - Just minor code re-arrangement and a small update was needed.

answered Jun 11 '15 at 20:44

Nikhil Aggarwal

28,197
4
43
59

.toggle or .show() / .hide() perhaps? And what to do if the button is hidden? – mplungjan Jun 11 '15 at 20:46
Thanks. I was about to bring these things in picture one by one. – Nikhil Aggarwal Jun 11 '15 at 20:47

Display on click jQuery

2 Answers2