Accordion Boxes Made Easy Software And Tutorial Kit
So, you made this great website page, put your heart into it. You've described in minute detail how well your idea can solve a problem. Only to realize... nobody is reading your page.
The problem may be that the page is too long and/or too boring to engage the user completely.
Your content may be boring. Visitors love to skip over paragraphs and skim through a page. If they like what they see they might go back to read the rest of the page. Accordion boxes make your page more interesting. They can engage the reader with a little fun.
An 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.
How Accordion Boxes Work
With this cool tool users can expand/collapse a responsive content boxes. You can structure accordion boxes to create a library, a menu or an e-store. 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. Hide boring content and make it look cool at the same time. Give your visitors a sense of fun. They want to see the hidden content. And they will explore to see what treasures are underneath.
With the growing mobile device usage long webpages tend to be too much information for the user. With an accordion box a webpage can be shortened to something a mobile user can quickly scan.
Did I mention that Accordion Boxes are mobile responsive? You bet, that is what sets these boxes apart from others. You still have to layout your content with mobile in mind.
Basic HTML code structure:
Replace this with your content.
<div class="accordion-title"<a href="#"><h2>Title</h2></a></div>
Replace this with your content.
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.
To use on a Solo Build It BB2 page, use 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 detailed in the Made Easy Tutorial.
Accordion-box CSS style have slightly rounded corner, a light gray background and a box shadow. Modern browsers show a light gray gradient. When a mouse is hovered over the the button, box shadow switches to inside the box. This gives the affect of being pushed. Contact me for help developing your own styles.
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.
Accordion-btn CSS style has medium sized rounded corners all around. It also has a light gray background with modern browsers showing a gradient instead. When hovered over the included text expands slightly and a n underline is added to the link. This gives the affect of the button popping up just a little bit.
btn-inner class creates the outline around the drop down panel. It contains a 1 px border which is a medium gray with rounded corners. The outline is responsive to the content inside. Works great on desktops and mobile devices.
btn-inner must be used in conjunction with accordion-panel class.
To make the boxes look awesome add some styling code to your css. Then modify the 'accordion-title' or 'accordion-panel' or 'div' tags.
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
tags. We show you how in the kit.
Accordion Boxes Made Easy Software and Tutorial Kit
Step by step tutorial to animate show / hide content boxes.