Simple Toggle cu ajutorul CSS-ului & jQuery

INFORMAŢII

Ştiu că există o mulţime de tutorialepentru toggle, dar când am învăţat bazele jQuery şi efectul toggle, m-am gândit să vi-l prezint si vouă.

După ce am citit cateva tutoriale, am observat ca toate erau explicate gresit, asa ca vi-l voi explic eu Simple Toggle cu ajutorul CSS-ului & jQuery 288104

Simple Toggle cu ajutorul CSS-ului & jQuery 288104

TUTORIAL

Primul pas: Wireframe & Style

Noi începem cu o etichetă de H2 cu un link care da efectul "de declanşare" . După h2 noastre, vom avea container nostru, unde noi vom insera conţinutul.

HTML
*Poate fi pus intr-o pagina HTML

Cod:

<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
   <div class="block">
      <h3>Content Header</h3>
      <!--Content-->
   </div>
</div>

CSS
*Codul il puteti pune intr-o pagiona HTML intre tag-ul < style > si < /style > sau uploadati intr-un fisier .css pe un host propriur:

Cod:

html {
   overflow-Y: scroll;
}
body {
   font: 10px normal Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
   line-height: 1.7em;
}
*, * focus {
   outline: none;
   margin: 0;
   padding: 0;
}

.container {
   width: 500px;
   margin: 0 auto;
}
h1 {
   font: 4em normal Georgia, 'Times New Roman', Times, serif;
   text-align:center;
   padding: 20px 0;
   color: #aaa;
}
h1 span { color: #666; }
h1 small{
   font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   letter-spacing: 1.5em;
   display: block;
   color: #666;
}
h2.trigger {
   padding: 0 0 0 50px;
   margin: 0 0 5px 0;
   background: url(http://www.sohtanaka.com/web-design/examples/toggle/h2_trigger_a.gif) no-repeat;
   height: 46px;
   line-height: 46px;
   width: 450px;
   font-size: 2em;
   font-weight: normal;
   float: left;
}
h2.trigger a {
   color: #fff;
   text-decoration: none;
   display: block;
}
h2.trigger a:hover {
   color: #ccc;
}
h2.active {background-position: left bottom;}
.toggle_container {
   margin: 0 0 5px;
   padding: 0;
   border-top: 1px solid #d6d6d6;
   background: #f0f0f0 url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_stretch.gif) repeat-y left top;
   overflow: hidden;
   font-size: 1.2em;
   width: 500px;
   clear: both;
}
.toggle_container .block {
   padding: 20px;
   background: url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_btm.gif) no-repeat left bottom;
}
.toggle_container .block p {
   padding: 5px 0;
   margin: 5px 0;
}
.toggle_container h3 {
   font: 2.5em normal Georgia, "Times New Roman", Times, serif;
   margin: 0 0 10px;
   padding: 0 0 5px 0;
   border-bottom: 1px dashed #ccc;
}
.toggle_container img {
   float: left;
   margin: 10px 15px 15px 0;
   padding: 5px;
   background: #ddd;
   border: 1px solid #ccc;
}

Al doilea pas: Activarea efectului toggle jQuery

Vom activa acum acest efect toogle cu un simplu script jQuery.

Cod:

$(document).ready(function(){

   //Hide (Collapse) the toggle containers on load
   $(".toggle_container").hide(); 

   //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
   $("h2.trigger").click(function(){
      $(this).toggleClass("active").next().slideToggle("slow");
      return false; //Prevent the browser jump to the link anchor
   });

});

DEMONSTRAţIE

DEMO

DREPTURI DE AUTOR

Tutorial creeat de SohTanaka in limba engleza.
Tutorial tradus de The Unique in limba romana.
Corectat de The Unique.