CODEWITHSUNDEEP
jqueryhtmlcss
Darcey Mckelvey
Darcey Mckelvey

Reputation: 556

.slideToggle acting not as it should?

When the user clicks on sidebar I want it toggle in or out. Can seem to get this to happen here is the code I have:

jquery code:

$(function() {
  $("a#toggle").click(function(e) {
    e.preventDefault();
    $("#aside").slideToggle();
    return false;
  });
});

html:

    <div class="wrap" id="aside">
        <aside class="left-aside">
            <header class="aside-header">
                <h1>stuff</h1>
            </header>
        </aside>
    </div>
    <a id="toggle">Sidebar</a>

and the css:

#aside {
  display: none;
}

Upvotes: 0

Views: 54

Answers (1)

mukesh kumar Jangid
mukesh kumar Jangid

Reputation: 418

You should try this for sliding

<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.getJSON demo</title>
      <style>
      #aside {
        display: none;
      </style>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script>
    $(document).ready(function(){
    $(function() {
      $("#toggle").click(function(e) {
        e.preventDefault();
        $("#aside").slideToggle();
        return false;
      });
    });
    });
    </script>
    </head>
    <body>
      <div class="wrap" id="aside">
            <aside class="left-aside">
                <header class="aside-header">
                    <h1>stuff</h1>
                </header>
            </aside>
        </div>
        <a id="toggle">Sidebar</a>

    </body>
    </html>

Upvotes: 1

Related Questions