www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slidetoggle showing and hiding straight away

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    Slidetoggle showing and hiding straight away

    Hi All,

    I have created a really simple slidetoggle for a slidedown menu. Basically when you click on the icon I want the menu to slidedown allowing the user to click on the menu items. Once the icon is clicked again I want the menu to slideup.

    It works sort of! However, when you click the icon (.toggle) it shows the menu and hides the menu immediately. I have googled the toggle code but I can't see what I am doing wrong.

    Any ideas?

    Code:
    $('.toggle').click(function(){
      $('nav.mobile').slideToggle();
    })

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slideToggle</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;text-align:center;padding-top:200px;}
    a:link,a:active,a:visited{text-decoration:none;font-weight:bold;background-color:transparent;color:#000;font-family:Georgia,Verdana;font-size:24px;}
    a:hover{text-decoration:none;font-weight:bold;background-color:transparent;color:Crimson;}
    .mobile{display:none;}
    li{color:transparent;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.toggle').click(function(){$('.mobile').slideToggle('fast');});
    });
    </script>
    </head>
    <body>
    <ul id="menu">
    <li class="toggle"><a href="#null">Menu icon</a></li>
    <li class="mobile"><a href="#null">one</a></li>
    <li class="mobile"><a href="#null">two</a></li>
    <li class="mobile"><a href="#null">three</a></li>
    <li class="mobile"><a href="#null">four</a></li>
    <li class="mobile"><a href="#null">five</a></li>
    </ul>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jan 2014
    Posts
    2

    Wink Using jQuery slideToggle Menu

    Hello,

    Here I have created one jQuery slideToggle Menu example.



    index.html
    HTML Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
      <meta charset="UTF-8">
    
      <title>jQuery slideToggle Menu</title>
    
        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    
    </head>
    
    <body>  
    
    <body>              
    		<!-- Main Container -->
            <div id="main-container"> 
    
    			<!-- Dashboard -->
                <div id="dashboard" class="tab tabNoSelected"> 
                    <h3><span class="ion-speedometer"></span>Dashboard</h3>
                    <a href="#1" class="notification">18</a>
                </div>
                <div id="dashboardBody" class="tabBody">
                    <ul class="tabBodyOptions">
                        <li><a href="#10"><span class="ion-ios7-keypad-outline"></span> Widgets</a></li>
                        <li><a href="#11"><span class="ion-ios7-pie-outline"></span> Chart</a></li>
                        <li><a href="#12"><span class="ion-document"></span> Form Stuff</a></li>
    					<li><a href="#12"><span class="ion-ios7-calendar-outline"></span> Calendar</a></li>					
                    </ul>                
                </div>
    
                
    			<!-- Messages -->
                <div id="messages" class="tab tabSelected">
                    <h3><span class="ion-ios7-email-outline"></span>Messages</h3>
                    <a href="#3" class="notification">23</a>         
                </div>
                <div id="messagesBody" class="tabBody">                
    				<ul class="tabBodyOptions">
                              <li><a href="#"><span class="ion-ios7-filing-outline"></span> Inbox</a></li>                          
                              <li><a href="#"><span class="ion-ios7-paperplane-outline"></span> Sent</a></li>                          
                              <li><a href="#"><span class="ion-ios7-trash-outline"></span> Trash</a></li>
                          </ul>
                </div>
    			
    			<!-- Profile -->
    			<div id="profile" class="tab tabNoSelected"> 
                    <h3><span class="ion-ios7-person-outline"></span>Profile</h3>
                    <a href="#2" class="notification">4</a>
                </div>
                <div id="profileBody" class="tabBody"> 
                    <ul class="tabBodyOptions">
    					<li><a href="#22"><span class="ion-ios7-time-outline"></span> Timeline</a></li>
                        <li><a href="#20"><span class="ion-ios7-person-outline"></span> Users</a></li>
                        <li><a href="#21"><span class="ion-ios7-personadd-outline"></span> Add Contact</a></li>
    					<li><a href="#22"><span class="ion-ios7-chatbubble-outline"></span> Chat</a></li>
                    </ul>                
                </div>
    			
    			<!-- Settings -->
                <div id="settings" class="tab tabNoSelected"> 
                    <h3><span class="ion-ios7-gear-outline"></span>Settings</h3>
                    <a href="#4" class="notification">6</a>                
                </div>
                <div id="settingsBody" class="tabBody">
                    <ul class="tabBodyOptions">
                        <li><a href="#40"><span class="ion-ios7-unlocked-outline"></span> Accounts</a></li>
                        <li><a href="#41"><span class="ion-ios7-bell-outline"></span>Notifications</a></li>
                        <li><a href="#42"><span class="ion-ios7-lightbulb-outline"></span> Alerts</a></li>
                    </ul>                
                </div>
    
            </div>
    		<!-- Main Container end -->
    </body>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/script.js"></script>
    
    </body>
    
    </html>
    style.css

    Code:
    @import url(ionicons.min.css);
     
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
     
    body {
        background: #d3d4d6;
    }
    a {
        text-decoration: none;
        font-family: sans-serif;    
        font-weight: bold;
    }
    span {
        font-size: 22px;
        font-weight: normal;
        padding-right: 16px;    
    }
     
    #main-container {
        width: 310px;
        height: 330px;
        margin: 3em auto;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    }
        .tab {
            width: 310px;
            height: 55px;
            -webkit-transition: background .1s ease-out;
            -moz-transition: background .1s ease-out;
            -o-transition: background .1s ease-out;
            -ms-transition: background .1s ease-out;
            transition: background .1s ease-out;
        }
            .tab h3 {
                margin: 0 0 0 20px;
                line-height: 50px;
                cursor: pointer;
                font-size: 16px;
                font-family: sans-serif;
                display: inline-block;
                float: left;
                -webkit-transition: color .1s ease-out;
                -moz-transition: color .1s ease-out;
                -o-transition: color .1s ease-out;
                -ms-transition: color .1s ease-out;
                transition: color .1s ease-out;
                }
                .notification {
                    display: inline-block;
                    width: 39px;
                    line-height: 24px;
                    float: right;
                    margin: 15px 15px;
                    text-align: center;
                    color: #ffffff;
                    font-size: 11px;            
                    -webkit-border-radius: 25px;
                    -moz-border-radius: 25px;
                    border-radius: 25px;
                    -webkit-transition: background .1s ease-out;
                    -moz-transition: background .1s ease-out;
                    -o-transition: background .1s ease-out;
                    -ms-transition: background .1s ease-out;
                    transition: background .1s ease-out;
                }
        .tabSelected {
            background: #007AFF;
        }
            .tabSelected h3 {
                color: #ffffff;
            }
            .tabSelected .notification {
                background: #2F90FA;            
            }
                .tabSelected .notification:hover {
                    background: #2F90FA;
                }
        .tabNoSelected {
            background: #ffffff;
            border-bottom: solid 1px #e6e6e6;   
        }
            .tabNoSelected:hover {
                border: solid 1px #F2F2F2;
            }
            .tabNoSelected h3 {
                color: #363a3d;
            }
            .tabNoSelected .notification {
                background: #dcdddf;
            }
                .tabNoSelected .notification:hover {
                    background: #2F90FA;
                }
        .tabBody {
            background: #2F90FA;
            width: 310px;
            height: auto;
            display: none;
            border-top: solid 1px #3C99FF;
        }
            .tabBodyOptions {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }
            .tabBodyOptions a {
                display: block;
                color: #fce7e4;
                font-size: 13px;
                line-height: 32px;
                width: 310px;
                padding-left: 20px;
                -webkit-transition: background .3s ease-out;
                -moz-transition: background .3s ease-out;
                -o-transition: background .3s ease-out;
                -ms-transition: background .3s ease-out;
                transition: background .3s ease-out;
            }
                .tabBodyOptions a:hover {
                    background: #007AFF;
                    color: #ffffff;
                }
            .tabBodyOptions span {
                font-size: 20px;
            }

    script.js
    In this part of the tutorial, we are going to write the jQuery code to make the menu work like slide Toggle.


    $(“.tabBody”).slideUp(“fast”); The .slideUp() method animates the height of the matched elements. In our example we use this method to slide up .tabBody class element.
    $(“#settingsBody”).slideToggle(“fast”); The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. We use it to apply slide toggle effect to #settingsBody element (child elements of menu).

    Code:
    $(document).ready(function() {
     
    $("#messagesBody").slideToggle("fast"); // The Body of "Messages" is already opened in the design sample.
     
      $("#dashboard").click(function(){
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#dashboardBody").slideToggle("fast");
      });
        $("#profile").click(function(){
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#profileBody").slideToggle("fast");
      });
      $("#messages").click(function(){
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#messagesBody").slideToggle("fast");
      });
      $("#settings").click(function(){
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#settingsBody").slideToggle("fast");
      });
    });
    Still you need more help follow this link .

    Regards,
    A

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles