Efecte acordeon

Un efect foarte interesant de acordeon pe verticala (vezi aici acelasi efec dar pe orizontala)
Ori de cate ori efectuam orice actiune pe o eticheta si dam clic pe ea pentru a interactiona, doar cu CSS nu este suficient, avem nevoie de JavaScript pentru ca browser-ului sa actioneze efectul acordeoane, vezi exemplul de mai jos:

Primul efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where

Al doilea efect

Proin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.

Al treilea efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where

Un acordeon este o serie de link-uri care ne permit sa afiam sau sa ascundem un continut, astfel incat numai unul este vizibila atunci cand facem selectia, asa castigam spatil pe blog.

Pentru inceput mergi la Aspect --> Editati HTML/Javascript si cauta linia </head> adaugi urmatorul cod javascript:

<script>
//<![CDATA[
var abierto = "primero";
function demoacordeon(cual) {
var mostrar = document.getElementById(cual);
var actual = document.getElementById(abierto);
if(mostrar==actual) {return false;}
// permutamos sus clases
actual.className="novisible";
mostrar.className="visible";
abierto = cual;
}
//]]>
</script>

in continuare cauta linia ]]></b:skin> exact inaintea ei adaugi codul CSS urmator:

<style>
#demoA { /* div dimensionare si centrare */
margin: 0 auto;
width: 500px;
}
#demoA a { /* propietati link si butoane */
background-color: #456;
box-shadow: 0 0 4px #ABC inset;
display: block;
font-size: 16px;
height: 2em;
line-height: 2em;
margin: 1px 0;
padding-left: 20px;
}
#demoA a:hover {
box-shadow: 0 0 12px #ABC inset;
color: #EEE;
}
#demoA div { /* los contenidos */
overflow:hidden;
text-align: center;
/* fiecare schimbare se realizeaza cu efect anumat¨*/
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#demoA div.visible {
border: 1px solid #456;
height:100px;
}
#demoA div.novisible {
border: 1px solid transparent;
height:0px;
}
</style>

salveaza modificarile si acum deschizi un post nou si adaugi codul HTML urmator:

<div id="demoA">
<a onclick="demoacordeon('primero');" href="javascript:void(0);">TEXT 1</a>
<div id="primero" class="visible">
<p> ....... CONTINUT 1 ....... </p>
</div>
<a onclick="demoacordeon('segundo');" href="javascript:void(0);">tEXT 2</a>
<div id="segundo" class="novisible">
<p> ....... CONTINUT 2 ....... </p>
</div>
<a onclick="demoacordeon('tercero');" href="javascript:void(0);">TEXT 3</a>
<div id="tercero" class="novisible">
<p> ....... CONTINUT 3 ....... </p>
</div>
</div>