»
EnglishFrenchVietnamese

Print - Awesome jQuery Accordion with CSS3 and HTML5 - JavaScriptBank.com

Full version: jsB@nk » Framework » jQuery » Awesome jQuery Accordion with CSS3 and HTML5
URL: http://www.javascriptbank.com/awesome-jquery-accordion-with-css3-html5.html

Awesome jQuery Accordion with CSS3 and HTML5 © JavaScriptBank.comThis JavaScript-jQuery code example is suitable for websites with a huge list of categories (divided into subjects) need to be showed. This accordion menu jQuery code example displays all navigating menus in a full bright color manner, with one thumbnail picture per each subject of categories.The animations of this JavaScript accordion menu made with support of jQuery framework scrolling appearance. You can easily replace the animations of script by other built-in jQuery functions.It's not easy to build this jQuery accordion CSS script from the beginning, so I'll guide you how to build it in the next JavaScript article tutorial; now it's time to enjoy this amazing effect in the live demo page.

Full version: jsB@nk » Framework » jQuery » Awesome jQuery Accordion with CSS3 and HTML5
URL: http://www.javascriptbank.com/awesome-jquery-accordion-with-css3-html5.html



CSS
<link rel='stylesheet' type='text/css' href='css/style.css' />


JavaScript
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>    <script type='text/javascript' src='js/infogrid.js'></script>


HTML
<div id="page-wrap"><div class="info-col">    <h2>Superman</h2>        <a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>        <dl>      <dt>Super Power</dt>      <dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Costume</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Morality</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Sidekicks</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Vehicles</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Weaknesses</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>    </dl></div>        <div class="info-col">                <h2>Batman</h2>                <a class="image batman" href="http://jprart.deviantart.com/">View Image</a>                <dl>          <dt>Super Power</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>          <dt>Costume</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>          <dt>Morality</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>          <dt>Sidekicks</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>          <dt>Vehicles</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>          <dt>Weaknesses</dt>          <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea         commodo consequat.</dd>        </dl>                </div><div class="info-col">    <h2>Aquaman</h2>                <a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>        <dl>      <dt id="starter">Super Power</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Costume</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Morality</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Sidekicks</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Vehicles</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Weaknesses</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>    </dl></div><div class="info-col">    <h2>Spiderman</h2>                <a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>        <dl>      <dt>Super Power</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Costume</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Morality</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Sidekicks</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Vehicles</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Weaknesses</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>    </dl></div><div class="info-col">    <h2>Ironman</h2>                <a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>        <dl>      <dt>Super Power</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Costume</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Morality</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Sidekicks</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Vehicles</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>      <dt>Weaknesses</dt>      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea     commodo consequat.</dd>    </dl></div></div>


Files
/javascript/framework/Awesome_jQuery_Accordion_with_CSS3_and_HTML5/Awesome jQuery Accordion with CSS3 and HTML5.zip