It’s been a long time since I’ve done a tutorial. Anyway accordions could be helpful at times. You could use it to display important information on your site without wasting much space. Here’s a simple tutorial on how you could create a simple accordion for your site. It may be simple but you’ll still require some basic HTML and CSS knowledge, having know how to use jQuery would be a definite plus.

First Step: Structure

The markup is pretty simple. The <div class="section"> tag will be the item. The <h3 class="title"> tag will be the title for the item. And everything in <div class="details"> will be the content of your item which will slide up and down. You can have as many items as you’d like.

Basically,

• <div class=”section”> = Single item
  • <h3 class="title"> = The title
  • <div class=”details”> = The content, that will slide up and down

And here’s the code

<div id="faq">
    <div class="navigation">
        <p class="title">FAQ</p>
        <p class="expand"><a href="#">Expand All</a></p>
        <p class="collapse"><a href="#">Collapse All</a></p>
        <div class="clear"></div>
    </div>

    <div class="section">
        <h3 class="title">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet?</h3>
        <div class="details">
            <!--Content Goes Here-->
        </div>
    </div>
</div>

Replace <!-- Content Goes Here --> with your real content.

Second Step: Styling

Here’s the part where we style up everything and add some pretty colours(colors) to the accordion. I used some basic CSS3 too.

.clear { clear: both; }
#faq {
    background: #f9f9f9;
    border: 1px #bbb solid;
    margin: auto;
    width: 700px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    box-shadow: 2px 2px 4px #333;
    -moz-box-shadow: 2px 2px 4px #333;
    -webkit-box-shadow: 2px 2px 4px #333;
}
    #faq .navigation {
        background: #fff url(images/bg-2.png) repeat-x bottom left;
        border-bottom: 1px #bbb solid;
        position: relative;
        z-index: 1;
    }
        #faq .navigation p.title { width: 100%; position: absolute; z-index: 1; top: 5px; bottom: 5px; font-weight: 700; color: #555; text-align: center;  }
        #faq .navigation p.expand { float: left; position: relative; z-index: 1; }
        #faq .navigation p.collapse { float: right; position: relative; z-index: 1; }
        #faq .navigation p {
            font-size: 14px;
            margin: 0;
            text-shadow: 1px 1px #FFF;
        }
            #faq .navigation p.expand a { border-right: 1px #bbb solid; }
            #faq .navigation p.collapse a { border-left: 1px #bbb solid; }
            #faq .navigation p a {
                outline: none;
                display: block;
                padding: 5px 10px;

                text-decoration: none;
                color: #666;
            }
            #faq .navigation p a:hover { color: #444; }
            #faq .navigation p a:active { color: #444; background: #e2e2e2; }
    #faq .section {
        background: #e8e8e8 url(images/bg-3.png) repeat top left;
        border-bottom: 1px #bbb solid;
        padding: 7px 10px;
    }
    #faq .section:last-child { border: none; }
        #faq .section h3.title {
            background: url(images/plus.png) no-repeat center right;
            color: #444;
            font-size: 12.6px;
            margin: 0;
            padding: 0 12px 0 0;
            cursor: pointer;
        }
        #faq .section h3.title.open { background-image: url(images/minus.png); }
        #faq .section .details {
            display: none;
        }
            #faq .section .details p {
                margin: 3px 0 6px 0;
            }

Third Step: jQuery Magic

This is where we make everything move, with some jQuery magic. First of all make sure you’ve included jQuery in your site.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Now its time for the real magic:

$(document).ready(function(){
	$('#faq .navigation .expand a').click(function() {
		$(this).parent().parent().parent().children('.section').children('h3.title').addClass('open');
		$(this).parent().parent().parent().children('.section').children('.details').stop(true, true).slideDown();
		return false;
	});
	$('#faq .navigation .collapse a').click(function() {
		$(this).parent().parent().parent().children('.section').children('h3.title').removeClass('open');
		$(this).parent().parent().parent().children('.section').children('.details').stop(true, true).slideUp();
		return false;
	});
	$('#faq .section').click(function() {
		$(this).toggleClass('open');
		$(this).parent().children('.details').stop(true, true).slideToggle();
		return false;
	});
});

Conclusion

That’s it! It’s as simple as that, it should work. I’d love some questions!

I like him.

Ping has been introduced in iTunes 10, which is most probably similar to Last.FM. Awesome stuff!

Who would do such a thing?! Puppies are gifts, they are too cute to be killed! I honestly hope that bitch suffers a bad death. I would strangle her.

Another puppy related incident.

I’m using two jQuery plugins to manage the images. TinyCarousel is one of them, it creates an image slider for navigation and ColorBox helps open clicked images without leaving the page. It’s actually fun. Formatting images from the album feed is a breeze with the help of SimplePie which by default is included in WordPress. It does all the back end work for me.

Cool eh? Try hovering or clicking on an image. Dig into my source code to get more information. All done with CSS3 and some Javascript(or shall I say jQuery). Sorry IE’ers, no support for y’all but it works great on IE7 and above.

About the Twitter integration, I don’t think its going to be possible. Various reasons.