All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery slidetoggle Left

Last Updated : Mar 11, 2024

jQuery slidetoggle Left

In this article we will show you the solution of jQuery slidetoggle left, here we needs to use animate() and click() methods for achieve the result.

The animate() method performs a custom animation of a set of CSS properties.

This method changes an element from one state to another with CSS styles. The click() method used to triggers click event when user clicks on selected element.

Step By Step Guide On jQuery slidetoggle Left :-

Here we defined div element within h1 tag defined with id attribute and button ‘Toggle Left’ for generates process.

In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click() method’s click event occurrence which is added on button.

Within this we specifying div element then which is appended with animate process there we changed width value to ‘0’.

<!DOCTYPE html>
<html>
    <head>
        <title>TOGGLE SLIDE LEFT</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('button').click(function(){
                    $("div").animate({
                        width:0
                    });
                });
                });
        </script>
        </head>
        <body>
            <style>
                div{
                    width: 500px;
                    padding: 10px;
                    background-color: bisque;
                    overflow: hidden;
                }
            </style>
            <div>
                <h1 id="h">This is heading tag.</h1>
            </div>
            <button>Toggle Left</button>
        </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready() method within that we added click method with button element by tag name ‘button’.
  8. Within function we specified div element with animate method there we sets width to ‘0’ so which is closes the div element width with child.
  9. In style block we defined some styles for ‘div’ tag those are ‘width set to 500px, padding sets to 10px, background color sets to bisque and overflow sets to hidden’.
  10. In html block we defined div tag with h1 element ‘This is heading tag’ with id attribute ‘h’ and button ‘Toggle Left’.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to create slide toggle from left using jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.

When we executes program on browser we can see div tag with heading ‘This is heading tag.’ and button ‘Toggle Left’, now user needs to clicks on it then width of div element goes to value ‘0’ so it will toggled to left in hidden state.

I hope this article on jQuery slidetoggle left helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪