Tengo una consulta.
Sucede que quiero formar una "X" con Javascript: dándole clic a un div llama a una función que interactua al css y cambia la posición de otros div's mas pequeños y forman una "X". Bueno, eso si lo he podido hacer. Mi problema es que quiero que al darle clic al mismo div, quiero que los elementos regresen a su forma original (algo así como un efecto palanca) pero no he podido lograrlo.
Ya se que existe jQuery y también se puede hacer con CSS pero la verdad quiero hacerlo netamente con un código que yo mismo haga para así poder aprender y no solo usar librerías. Ademas, intentando solucionar esto me tope con otro tema... ¿Por qué Javascript solo encuentra a los elementos si solo los llamo por el ID?, intente llamarlos por el class pero no sucede nada, como si no los reconociera. Gracias de ante mano a los que puedan ayudarme.
function exis(){
var elementoDiv1 = document.getElementById('primera-linea');
var elementoDiv2 = document.getElementById('segunda-linea');
elementoDiv1.style.right="5px";
elementoDiv2.style.top="5px";
elementoDiv1.style.transform="rotate(-30deg)";
elementoDiv2.style.transform="rotate(30deg)";
}
#Conten{
width: 65px;
height: 65px;
padding-top: 10px;
background-color: blueviolet;
}
#Conten div{
width: 60px;
height: 5px;
margin-bottom: 5px;
border-radius: 3px;
}
#BTN:checked ~ #Conten div{
background-color: green;
}
#primera-linea {
/*transform: rotate(-30deg);*/
transform-origin: right;
background-color: brown;
/*top: 10px;*/
/*right: 5px;*/
transition: transform 0.5s;
position: relative;
}
#segunda-linea{
position: relative;
/*top: 5px;*/
/*transform: rotate(30deg);*/
transform-origin: center;
transition: transform 0.5s;
background-color: red;
}
#tercera-linea{
display: none;
background-color: dimgrey;
position: relative;
top: 0px;
<html>
<head>
</head>
<body>
<!--<div id="contenedor">
<input type="checkbox" id="BTN">
<label for="BTN"> CLICK</label>-->
<div id="Conten" onclick="exis()" >
<div id="primera-linea"></div>
<div id="segunda-linea"></div>
<div id="tercera-linea"></div>
</div>
<!-- </div>-->
</body>
</html>