Home | Archives | Blog | Articles | Categories | Sitemap | Contact | Terms | Privacy | About Me

jQuery Accordion Boxes Software & Tutorial Kit To Animate Show or Hide Content Boxes

Accordion Boxes box coverSo, you made this great website page, put your heart into it. You've described in minute detail how well your product can solve a problem. Only to realize nobody is reading your page.

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.

Accordion boxes box cover

jQuery Accordion Boxes Software and Tutorial Kit

Step by step tutorial to animate show / hide content boxes.

Only $4.99!
Click Here To Order
Kit Includes:

  • Step by Step Tutorial
  • Plug in Javascript files
  • CSS style rules file
  • Text file of code
  • Tips and tricks
  • Help & support

Read Table of Contents

Smartphone with banner
Smartphone with banner
With this cool tool users can control content to expand/collapse a responsive content box. 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.

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.

Only $4.99!
Click Here To Order

The jQuery Accordion Boxes Code Chunks

Smartphone with pointer You need to include these javascript codes on your page (or website). You want to add this right before the closing tag or the very bottom of the page. For experienced HTML coders you just download this code to your desktop then upload it to your javascript folder.

<script src="jquery-1.11.0.min.js">
</script>
<script src="accordion-boxes.js"></script>

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

This code goes at the very top of the jquery accordion box.
<div class="accordion">
<div class="accordion-control">
<a href="#"><h2>Title</h2>

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.

Included in the kit

This code goes between the control and panel boxes.

</a>
</div> <div class="accordion-panel">

Your main content goes here. Meaning below this code chunk and above the next. Which could be either the 'Stacking' or 'Bottom' code chunk.

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.

Included in the kit

</div>
<div class="accordion-title accordion-box"><a href="#" title="click to open or close"><h2>Title</h2>

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.

Included in the kit

Use this code at the very bottom of the box stack. It closes the panel and the accordion box. </div></div>

Included in the kit

You need 2 javascript files and this html code to make a 2 button stack.

jquery-1.11.0.min.js
accordion.js

Basic HTML code structure:

<div class="accordion">
<div class="accordion-title">
<a href="#"><h2>Title</h2></a></div>
<div class="accordion-panel">
Replace this with your content.
</div>
<div class="accordion-title"<a href="#"><h2>Title</h2></a></div> <div class="accordion-panel">
Replace this with your content. </div> </div>

Included in the kit

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.

jQuery Accordion Boxes allow for styling the title box and content panels. You could stack as many as you want but only need to add the javascript files once per page. You can have just one item or many.

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.

Only $4.99!
Click Here To Order

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.

Included in the kit

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.

Included in the kit

Inner-btn CSS style has medium sized rounded corners and switches the box shadow from outer to inside the button. It has a transparent background that switches to a light yellow when hovered over.
Smartphone with pencil Icons and images can be added to the title and panel boxes. Use typical styling techniques like 'float:left' or align="right" to locate it properly.

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.

Included in the kit

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.

That's it, thanks for reading.
Tim

Only $4.99!
Click Here To Order

: Cool Tools for Mobile Apps and Websites : jQuery Accordion Boxes software and tutorial. Use animated control panels to show or hide content. Make long pages shorter.

top of the page

Inside Miappmaker

Follow me on Twitter Follow me on Twitter.

Rss/Blog Feed

Mobile App Blog

↑ Grab this Headline Animator

MiAppMaker Monthly NewsLetter

Get a FREE Utility app with your subscription

Enter Your E-mail Address
Enter Your First Name (optional)
Then

Don't worry — your e-mail address is totally secure.
I promise to use it only to send you MiAppMaker NewsLetter.