Dirigido a div anterior en javascript o css

Código HTML:

Código Javascript:

  $(".button").click(function() { if ($(this).parent().previousSibling('.content').css('display') == 'none'){ $('.content').hide(); $(this).parent().previousSibling('.content').show(); }else { $('.content').hide(); } }); 

¿Cómo haría para mostrar solo el área de texto cuando ‘Cick me’ se hace clic o se desplaza preferiblemente en css pero si no en javascript? Gracias chicos

https://jsfiddle.net/uway5hhg/8/

Como ejercicio, puede hacer este efecto en css puro (utilizando :target pseudoclase de :target y un largo retraso en una transición simple) si agrega un botón de cierre justo debajo del área de texto.

http://sofes.miximages.com/javascript/phrpre codediv class=content id=text textarea hello.png
Close


CSS

 #text { overflow: hidden; height: 0; opacity: 0; transition: opacity 0s 999999s; } #text:target { opacity: 1; height: auto; transition-delay: 0s; } #text:target ~ div a.button { display: none; } 

De todos modos, si busca un enfoque de jQuery directo, basta con un simple toggle() (puede que tenga que ocultar el elemento .content través de css, dependiendo de la condición inicial de su área de texto)

https://jsfiddle.net/uway5hhg/39/

 $(".button").click(function() { var content = $(this).parent().prev('.content'); content.toggle(); }); 

Por lo que sé, no hay forma de atrapar a hermanos anteriores en CSS.

Pero funciona con jQuery, aquí está tu código ligeramente cambiado:

  $(".button").on('click', function() { var ele = $(this), par = ele.parent(), sbl = par.prev(); if (sbl.css('display') == 'none'){ $('.content').hide(); sbl.show(); }else { $('.content').hide(); } }); 

El ejemplo de trabajo está aquí: https://jsfiddle.net/y0ab3n0L/

Eso debería hacer su trabajo.

JS:

 $(".button").click(function() { var contentBtn = $(this).parent(".content-btn"); var content = $(contentBtn).prev(".content"); var textarea = $(content).find("textarea"); $(textarea).toggle(); }); 

o evento más corto:

 $(".button").click(function() { $(this).parent(".content-btn").prev(".content").find("textarea").toggle(); }); 

https://jsfiddle.net/uway5hhg/21/

Espero que esto ayude 🙂

La solución provista por Fabrizio es buena si no desea javascript. Sin embargo, también puede modificar el DOM para que tenga un efecto similar.

 
Click me
CSS .content { display:none; } .content-wrapper:hover .content { display:block; } .content-wrapper:hover .button { display:none; }

https://jsfiddle.net/2Lsszgqz/

No hay tal pseudo elemento CSS – un a.button:click , por lo que solo la solución JS funcionará ( sin cambiar su estructura HTML ). También puedes cerrarla usando :focus pseudo clase CSS de :focus . Pero te faltará subir un nivel en CSS y luego mostrar el área de textarea . Por lo tanto, la única solución que queda es usar JS.

En su código JS de muestra, ha usado .previousSibling('.content') que es JS nativo, al que está llamando en el objeto jQuery, por eso no funcionará. jQuery equivalente de esta función es .prev('.content')

La syntax correcta sería:

 $(".button").click(function() { if ($(this).parent().prev('.content').css('display') == 'none'){ $('.content').hide(); $(this).parent().prev('.content').show(); }else { $('.content').hide(); } }); 

Violín de trabajo