Search code examples
jquerycssbuttonslidetoggle

In jQuery toggle I want to change shape of the button

I am beginner in jQuery. How can I change my jQuery button in slide down toggle animation?

Can I use css coded button in this html code if I can please help me with fully coded html

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
    $(document).ready(function() {
      $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
                            //change the button label to be 'Show'
            toggle_switch.html('Show');
          }else{
                            //change the button label to be 'Hide'
            toggle_switch.html('Hide');
          }
        });
      });

    }); 
    </script>
    <style> 
    .round-border {
        border: 1px solid #eee;
        border: 1px solid rgba(0, 0, 0, 0.05);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 5px;
    }
    </style>
</head>
<body>
    <section class="round-border">

        <div>
            <button href="#collapse1" class="nav-toggle">Show</button>
        </div>
        <div id="collapse1" style="display:none">
            <p>Bla bla bla bla</p>
        </div>
    </section>
</body>
</html>
Solution

  • you can use slideToggle function for showing and hiding div and for changing class usetoggleClass function demo you cant have href attr in button but you can use data attr

    <button data-href="collapse1" class="nav-toggle">Show</button>
    $(".nav-toggle") .click(function(){
    $(this).toggleClass("active");
    var h =$(this).data('href');
    $("#"+h).slideToggle(300);
    return false;
    });