Show, Hide, Expand, Collapse and Toggle functions with JQuery.
Can I show hide or expand collapse a html element like a div with java script?
Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse.
The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us.
Once jquery is uploaded set up your in-page html. The overall structure doesn’t matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command.
Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we’re selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information.
At this point you need to add the show hide toggle command. A.k.a the link that we’ve added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it’s existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed.
The last part of the script, the “400″ in your toggle function is the speed. You can either use a number, or use a word such as “slow”, “fast”, etc.. keep in mind though, when using words you do need to put them inside ‘quotation marks’ for it to register.
The final script for a single instance along with JQuery gets put in the head of your document:
If you would like to have multiple instances on the same page click “continue reading” below and use the following code instead which uses .next for multiple sliders on the same page.
The below example uses “next” so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page.