Horizontal Accordeon Slide Tutorial

Live Preview
sorry guys...for not being able to post a new one back there...im a litle busy these few days,but im back right now :D...of course with the new one :))

this time i will teach you to make a Horizontal accordeon slide....
acctualy i got this Tutorial after surfing in this cyber world hehehe ,and right now i will share it what i've got to you
see the screenshot above if you want to know what it is...and the Live Preview included of course ^.^,see it up there too.
Features :
* handle aligned to the left
* animation is opening and closing content at the same time
* event trigger is mouse over
* cycling every 10 seconds from 1 to 4 and than from 4 to 1
* new event will only be allowed, once the first animation completed

Ok Lets begin....

First Paste This Css Code, above this Code

» Click to show CSS Code - click again to hide... «

/*Main Container*/

.container {

width:100%;

}

.container ul{

list-style-type: none;

margin: 0;

padding:0;

}

.container li{

display: inline;

margin: 0px;

padding:0px;

}

/*Content Container*/

.contentContainer {

padding-left: 0px;

float: left;

width:0px;

height: 310px;

overflow:hidden;

}

.contentWrapper{

}

.contentInnerWrapper{

text-align: justify;

padding: 10px;

}

/* Handle*/

.handle{

float: left;

width: 38px;

height: 310px;

margin: 1px;

margin-right: -10px;

background: url(http://i191.photobucket.com/albums/z269/ziegey/blade.png) no-repeat;

}

.handleOver{

background: url(http://i191.photobucket.com/albums/z269/ziegey/blade_sel.png) no-repeat;

}

.handleSelected{

background: url(http://i191.photobucket.com/albums/z269/ziegey/blade_sel.png) no-repeat;

}

Now For the JavaScript,Paste This Code Below


<script src='http://www.geocities.com/ziegey_clonesphare/jquery-1.3.2.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.examples.js' type='text/javascript'/>


NOTE:you see js file URL right?? I suggest you download that file and reupload to your filehosting ,because im not responsible if that file removed from my account

Now The Last Thing you need to do...
Paste This Script Below

» Click to show Script Code - click again to hide... «

<ul class="test">

<li><div class="handle"><img src='http://i191.photobucket.com/albums/z269/ziegey/title1.png'></img></div><img src='http://i191.photobucket.com/albums/z269/ziegey/TipsnTrick.png' align='left' width="200" height="162"></img>

<h3>Object Dock Navigation Tutorial</h3>

<p><img src="http://1.bp.blogspot.com/_ArNmXA5xZm4/SiJKkQhDs_I/AAAAAAAAAIo/swOLRUr-jRI/s400/Object+Nav.JPG" width="400" height="76"></img>

here...another tutorial for your blog guys ^^

as the title above, you can tell ...am i right?..yes, this is the tutorial to create object dock <a href="http://www.ziegey-sharing.com/2009/05/create-blog-tabslide-navigation.html">navigation</a> :),ah if u dont know it's ok...just see the screenshot above this Tutorial ,nah...you can tell now ,right ^^ .I am already using this trick too ,so...you can see the live preview for this tutorial.

Actually my previous post already using this too ,yeah "<a href="http://www.ziegey-sharing.com/2009/05/blogspot-templatedota-allstars.html">The DotA Allstars Template</a>"...because of that ,few visitors want to know how i create this <a Href="http://www.ziegey-sharing.com/2009/05/create-blog-tabslide-navigation.html">navigation</a>.So...to answer that question i will tell you how to create it with this post

<a href="http://www.ziegey-sharing.com/2009/05/object-dock-navigation-tutorial.html">ReadMore>>></a>

</p>

</li>

<li><div class="handle"><img src='http://i191.photobucket.com/albums/z269/ziegey/title2.png'></img></div><img src='http://2.bp.blogspot.com/_ArNmXA5xZm4/Shl2f5MTgFI/AAAAAAAAAIY/PQvZYaqzY44/s400/Dota+screenshot+top.jpg' align='left' width="200" height="162"></img>

<h3>Blogspot Template:DotA Allstars</h3>


<p>yeah.... i come again with another template ^^,this is the third template i create after "<a href="http://www.ziegey-sharing.com/2009/05/blogspot-templateviolet-rose.html">The Violet Rose</a>" and "<a href="http://www.ziegey-sharing.com/2009/05/blogspot-templateuchiha-brothers.html">The Uchiha Brothers</a>".this time i choose warcraft III theme for this template (thx to nyoi...especially for the ideas :D),im sure u already familiar with warcraft (especially for gamers),if we talk about that, it must be dotA :))

in this template im using another navigation too...unlike my <a href="http://www.ziegey-sharing.com/2009/05/create-blog-tabslide-navigation.html">TabSlide navigation</a> before, this time im using navigation with fisheye version (thanks to <a href="http://www.andrewsellick.com/">http://www.andrewsellick.com</a> for the script) and im using box with low opacity too,so u can see the background (Sentinel Vs Scourge) .

Ok ,just like before...this is a few script that u can modify on ur own ^^<a href="http://www.ziegey-sharing.com/2009/05/blogspot-templatedota-allstars.html">ReadMore>>></a></p>

</li>

<li><div class="handle"><img src='http://i191.photobucket.com/albums/z269/ziegey/title3.png'></img></div><img src='http://1.bp.blogspot.com/_ArNmXA5xZm4/SebZl5SVQiI/AAAAAAAAABk/eXKwNOZqdZU/s320/0.96.jpg' align='left' width="200" height="162"></img>

<h3>PS2 Emulator Update 0.96 download</h3>


<p>NEW in <a href="http://www.ziegey-sharing.com/2008/12/emulator-ps2-works-100-on-my-pc.html">PCSX</a> 0.96<br/>

1. Huge rewrite, mainly from the new members of the Playground branch!<br/>

2. Dropped VM build replaced by the all new Vtlb, meaning no more ‘Cannot

allocate memory’ errors at start up, more accurate emulation, slightly lower

speeds but with many optimizations to come<br/>

3. Full memcard support, working in all <a href="http://www.ziegey-sharing.com/2009/05/chaos-legion-pc-free-download.html">games</a><br/>

4. Improved Frameskip/VU-skip<br/>

5. Special Game Fixes Section<br/>

6. Advanced Options Section for custom tweaking VU/FPU behavior.<br/>

7. Rewritten Multithreaded GS (MTGS) mode, with as much as 15% speedup for<br/>

HT machines (only 3-5% for Dual Core), and fixes many instabilities.<br/>

8. Improved VU/FPU Flags and Clamping support (helps fix odd behaviors and

SPS in some <a href="http://www.ziegey-sharing.com/2009/04/last-remnant-ost-free-download.html">games</a>)<a href="http://www.ziegey-sharing.com/2009/04/new-in-pcsx-0.html">ReadMore>>></a>

</p>

</li>

<li><div class="handle"><img src='http://i191.photobucket.com/albums/z269/ziegey/title4.png'></img></div><img src='http://2.bp.blogspot.com/_ArNmXA5xZm4/SesTe4vBDiI/AAAAAAAAACU/KtTqXR4VIDI/s320/body_bg.jpg' align='left' width="200" height="162"></img>

<h3>The Last Remnant :RELOADED Free Download</h3>


<p>The Last Remnant (??? ????? ,Rasuto Remunanto?) is a role-playing <a href="http://www.ziegey-sharing.com/2009/05/chaos-legion-pc-free-download.html">game</a> developed and published by Square Enix. The game is directed at both Japanese and Western audiences and had a simultaneous release in Japan, North America and Europe, on November 20, 2008 for the Xbox 360. The Microsoft Windows version of the game was released on March 20, 2009 in PAL territories and March 24, 2009 in North America, with a pending release April 9, 2009 in Japan. A worldwide release on the Steam network is also scheduled for April 9, 2009. The <a href="http://www.ziegey-sharing.com/2009/04/new-in-pcsx-0.html">PlayStation</a> 3 version of the game does not yet have a release date.

<br/>

The game is being directed by Hiroshi Takai and is the first Unreal Engine 3 game to be released by Square Enix. It is intended by Square Enix president Yoichi Wada to "become a cornerstone for their worldwide strategy". Art direction is being overseen by chief artist Kimihiko Miyamae and art producer Yusuke Naora. The game's <a href="http://www.ziegey-sharing.com/2009/04/last-remnant-ost-free-download.html">soundtrack</a> is composed by Tsuyoshi Sekito.<a href="http://www.ziegey-sharing.com/2009/04/last-remnant-pc-free-download.html">ReadMore>>></p>

</li>



</ul>

NOTE:If in your Header already had a widget then paste the code after </div> tag
Change As Needed...Text With Blue Color is Image Url,Text With Red Color Is Title For The Content,And with green color is the slide content

Ok Guys Thats all...(huff really tired after this)
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial