The problem is the page is too long and/or too boring to engage the user positively.
A jQuery accordion box uses animation to show/hide content making pages shorter and more interesting. Click on a title to open/close the content panel. Engage users longer, improve click through rate, time on page and bounce rate. Check it Out.
Step by step tutorial to animate show / hide content boxes.
Generate a sense of fun in your page with organized content. Users instantly get a feeling of satisfaction knowing they can control the virtual reality.
It is fun to open and close the boxes. With this tool a webmaster can engage their audience much faster and for a longer time.
With the growing mobile device usage long webpages tend to be too much information for the user to want to consume. With an accordion box a webpage can be shortened to something a mobile user can quickly scan.
Did I mention that jQuery Accordion Boxes are mobile responsive? You bet, that is what sets these accordion boxes apart from others. You still have to layout your content with mobile in mind.
Make sure you path this file in correctly. If you put this is a directory other than the root you need to point to it.
Included in the kit
The <a href="#"> tag is important. It uses a style rule 'display:block' which turns the whole button into a link, (not just the text).
I used the <h2> headline for my box title, so that mobile users have a large tappable area. The search engines love that.
</div> <div class="accordion-panel">
As you can see from this page you can squeeze a lot of information into a small space. However the idea is not to put too much info in the panel boxes. Instead use another accordion box.
Note: this code chunk should be followed by your 'box title' then another 'box middle' code chunk. Followed by your main content for that panel.
Basic HTML code structure:
Replace this with your content.
<div class="accordion-title"<a href="#"><h2>Title</h2></a></div> <div class="accordion-panel">
Replace this with your content. </div> </div>
The action, when clicked on uses the 'slideToggle' function in jQuery. The accordion.js is a simple program that controls the show/hide function of the panel. The actual code analysis is beyond the scope of this article. Let's just say it provides the animation of the accordion box.
I originally built this page using Site Build It BB2. Here is the best way to incorporate the code into SBI. Control the title box and content panel with a 'reusable block' to hold the html code chunks. You will need 4 reusable blocks. For uploading to your site, simply copy and paste the HTML and CSS code (shown below) into your page.
All button and box styles are found in the accordion-boxes.css file included in the kit. The code is well commented inside the included ebook. Best practices for modifying the code are reviewed.
btn-inner must be used in conjunction with accordion-panel class.
If you put an icon in your title box be aware that size does matter.
Inside the tutorial we explain how to modify change the code in the .css file. We also show how to get 'twemoji' icons into your page.
I used a light grey box with rounded corners for the control box. So my code looks like this: <div class="accordion-title accordion-box">
I added this code to my css file. Then added the CSS tag to my source code. To add this to a webpage only you need to include the source code in between the <style>...</style> tags in the head section of the page.
You can make up any style rules you like and add them to the 'title' or panel box
That's it, thanks for reading.
top of the page