CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kostadin
Kostadin

Reputation: 405

How to trigger onClick event properly

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/

Upvotes: 0

Views: 477

Answers (6)

Manu Benjamin
Manu Benjamin

Reputation: 997

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);  
      });
   });

Upvotes: 0

PeterKA
PeterKA

Reputation: 24648

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();
    });     
});

Upvotes: 1

Feroza
Feroza

Reputation: 407

Just try below code 

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

OR you can use just toggle

Upvotes: 0

RobertO
RobertO

Reputation: 2663

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

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

got it? ;-)

Upvotes: 1

Bla...
Bla...

Reputation: 7288

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.

Upvotes: 1

kamil
kamil

Reputation: 3522

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

Upvotes: 5

Related Questions