Magento is a Falkon favourite; learn how to make use of its powerful features to boost sales by defining related...
I’ve begun using this little feature more and more in recent projects, not only because I like it but Luke includes it in his Web Design. Using jQuery and HTML it is simple to create content that will disappear and reappear at the click of a button.
Firstly, you’ll need to reference jQuery. You can either do that by downloading the latest version and uploading it to your server, link to a copy on google’s servers or, if you’re using WordPress, use the inbuilt function.
Next up the content we want to show/hide.
- Some text that can be hidden.
Basically what happens above is when the page is loaded, the UL under the div ID ‘placeholder’ will be hidden automatically.
Next, when the div ID ‘placeholder’ h3 class ‘clickme’ is click (this is our title text) the UL under the div ID ‘placeholder’ will slide open. This will happen ‘fast’, this can also be changed. Using ‘return false’ will stop the browser window from ‘jumping’ to the content when clicked.
This can be adapted to suit your needs, such as adding a button in to click which will float down with content when clicked. Used for Tilt TV Brackets description. You can also have an image that changes when the list is active or inactive. This would use the CSS property ‘.active’. You would replace this line of code:
You can find example of this within our Website Design and the sidebar on the right.
Any Questions, just leave us a comment.