How to trigger onClick event properly

Question

I have a small control panel which contains three divs(title, content, and a dummy div). Above that panel i have a button which when clicked has to hide and show the content.

My aim is when i click the button to change the content div's id when it is hidden and when it is shown, also the button has to change from Close to Open. At this stage i make the content appear and dissapear but it is bugged. I think i have to use stopPropegation but i dont know how. If you can fix it i would be greatfull. Thanks in advance.

html code:

<!DOCTYPE html>

<html>

    <head>
        <title>Control Panel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">  

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="collapseExpand.js"></script> 
    </head>

    <body>
        <div id="button">
            <a href="javascript:void(0);" onclick="return hideShowContent()">Close</a> 

        </div>

        <div class="wrapper">
            <h1>Title</h1>

            <div id="content"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </div>
        </div>

        <div id="dummyDiv">
            test division
        </div>

    </body>

</html>

css code:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#button{
    margin-bottom: 10px;
}

h1{
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid gray; 
}

.wrapper{
    border: 1px solid gray;
    width: 430px;   
}

#content, #contentHide{
    margin: 10px;

}

#dummyDiv{
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

JavaScript code:

function hideShowContent() {
    console.log('The button was clicked');

    $(document).ready(function() {
        $('#button').click(function() {

            $("#content").attr('id', 'contentHide');
            $('#contentHide').hide(500);        
        });           
    });


    $(document).ready(function() {
        $('#button').click(function() {
             $("#contentHide").attr('id', 'content');   
            $('#content').show(500);

        });     
    });
}

JSfiddle: http://jsfiddle.net/wvLfbfgh/

Do not change the id, use addClass or removeClass, and use ".contentHide" in your CSS instead of "#contentHide" — manuBriot
– manuBriot, Commented Aug 19, 2014 at 12:44

kamil · Accepted Answer · 2014-08-19 12:46:37Z

5

I've fixed your script, all you need is:

$(document).ready(function() {
    $('#button').click(function() {           
        $("#content").toggle(500);       
    });           
});

http://jsfiddle.net/wvLfbfgh/1/

Basically, you created function and bind it inline onclick="return hideShowContent() and that function additionally binded new event on every click. That's wrong, define just in $(document).ready your action. Instead of using hide/show, use toggle which automaticly detects if target is shown or hidden

answered Aug 19, 2014 at 12:46

kamil

3,5221 gold badge44 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeterKA · Accepted Answer · 2014-08-19 13:06:10Z

DEMO

Please try as much as possible to avoid inline JS. The following code will both change the text of the button to Open/Close and will toggle the #content element between hide and show.

The click event gets bound several times because of the way you've defined your function. This will lead to several #content div swinging several times for a single click.

$(document).ready(function() {
    $('#button').click(function() {
        if( $("#content").is(':visible') ) {  
            $(this).find('a').text('Open');
            $('#content').hide(500);
        } else {
            $(this).find('a').text('Close');
            $('#content').show(500);
        }
        hideShowContent();
    });     
});

Bla... · Accepted Answer · 2014-08-19 12:47:32Z

1

Just change everything inside your jQuery into this:

function hideShowContent() {
    $("#content").slideToggle(500);
}

Or this, depends on your preference:

$('#button').on('click', function(){
    $("#content").slideToggle(500);
});

It's firing multiple time because, it triggers the function hideShowContent() and $('#button').click.

answered Aug 19, 2014 at 12:47

Bla...

7,2887 gold badges30 silver badges47 bronze badges

Comments

RobertO · Accepted Answer · 2014-08-19 12:48:42Z

1

The button on click hides and then shows the content. You forgot about something:

if (hidden)
   show()
else
  hide();

got it? ;-)

answered Aug 19, 2014 at 12:48

RobertO

2,6731 gold badge21 silver badges18 bronze badges

Comments

Feroza · Accepted Answer · 2014-08-19 12:49:27Z

0

Just try below code

  $(document).ready(function() { 
    $('#button').click(function() {                      
        $('#content').slideToggle(500);            
    });     
});

OR you can use just toggle

answered Aug 19, 2014 at 12:49

Feroza

4372 gold badges4 silver badges13 bronze badges

Comments

Manu Benjamin · Accepted Answer · 2014-08-19 13:09:23Z

0

Remove javascript onclick function and add following code,

   $(document).ready(function() {
      $('#button').click(function() {
         $("#content").is(':visible')  ? $(this).find('a').text('Open') : $(this).find('a').text('Close');
         $("#content").toggle(500);  
      });
   });

answered Aug 19, 2014 at 13:09

Manu Benjamin

99710 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to trigger onClick event properly

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Related