Soy nuevo en la programación.
Tengo varios divs hermanos con la misma clase y un botón Ver más. Quiero agregar una clase al div al hacer clic en el botón Ver más, pero uno por uno. Entonces, el primer sibling-div será visible y verá más botón. Cuando un usuario hace clic en el botón, el segundo sibling-div debe estar visible, luego, al hacer clic nuevamente, el tercer sibling-div debe estar visible y así sucesivamente.
No tengo acceso a html, así que usé jQuery para agregar el botón Ver más.
He usado CSS para ocultar todos los divs hermanos de forma predeterminada. Solo el primer botón div, view-more-btn y cuando haya una clase activa, serán visibles.
Intenté agregar clases usando jQuery pero se agrega a todos los divs.
este es el html
<div class="parent-div"> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div view-more"> <a class="view-more-btn">View More</a> </div> </div>Este es mi CSS
.parent-div .sibling-div{ display: none; } .parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{ display: block; }Este es mi jQuery
$(document).ready(function(){ var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>'; $(".parent-div .sibling-div:last-child").after(view_more); $(".parent-div .view-more-btn").click(function(){ /*Adds class to all sibling divs*/ $(".parent-div .sibling-div").addClass("active"); /*Also tried*/ $(".parent-div .sibling-div:first-child").next().addClass("active"); /*But it only adds class to the second sibling*/ /*Also tried using loop*/ var div_length = $(".parent-div .sibling-div").length(); for(i=0; i <= div_length; i++){ $(".parent-div .sibling-div").addClass("active"); } }); }); He probado todos estos métodos, pero no funciona como yo quiero. Agrega clase a todos los sibling-div , o solo al segundo sibling-div
Puede acceder al siguiente elemento oculto en el grupo con
$(".parent-div .sibling-div:hidden:first") :hidden sin opacidad o visualización: ninguno. :first es un selector de jQuery que apunta al primer elemento de la coincidencia.
$(document).ready(function() { $('.parent-div').append('<div class="" view-more"><a class="view-more-btn" href="#">View more</a></div>'); $(".parent-div .view-more-btn").click(function() { $(".parent-div .sibling-div:hidden:first").addClass("active"); }); }); .parent-div .sibling-div { display: none; } .parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent-div"> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> <div class="sibling-div"> /*content*/ </div> </div>Recomiendo simplemente agregar una identificación en cada <div id="div-1" class="sibling-div"> con el propósito de precisión, haga lo que haga en ese div.