jQuery(".b2b-btn").click(function() { jQuery(".b2b-image").removeClass('hideb2bimage'); jQuery(".b2b-text").removeClass('expanded'); jQuery(this).closest('col-b2b').find(".b2b-image").toggleClass('hideb2bimage'); jQuery(this).closest('col-b2b').find(".b2b-text").toggleClass('expanded'); }); .hideb2bimage { height: 0px; visibility: hidden; } .b2b-text { height: 0px; visibility: hidden; opacity: 0; transition: visibility 0s ease-out 500ms, opacity 500ms; } .expanded { height: auto; visibility: visible; opacity: 1; transition: visibility 0s ease-in 0s, opacity 500ms; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-row"> <div class="col-b2b"> <img class="b2b-image" scr="https://picsum.photos/200/300?random=1"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" scr="https://picsum.photos/200/300?random=2"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" scr="https://picsum.photos/200/300?random=3"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> </div>Quiero mostrar texto y ocultar imagen al hacer clic en el botón. Pero solo quiero mostrar el texto de la columna en la que se hace clic en el botón. Además, en caso de que alguien haga clic en la primera columna y muestre el texto de una columna y luego haga clic en el botón de la segunda columna, debería ocultar el texto de la primera columna. Arriba está el código que estoy usando, hágame saber qué error estoy cometiendo. También quiero hacer que la función de clic en la imagen también.
Varios errores tipográficos y algunos errores CSS:
jQuery(this).closest('col-b2b') debe ser jQuery(this).closest('.col-b2b') .<img class="b2b-image" scr=" debe ser <img class="b2b-image" src=" .visibility no se puede transformar. Usa opacity en su lugar.height y otras longitudes no se pueden transformar en valores auto . Trabaja con la animación max-height su lugar. jQuery(".b2b-btn").click(function() { jQuery(".b2b-image").removeClass('hideb2bimage'); jQuery(".b2b-text").removeClass('expanded'); jQuery(this).closest('.col-b2b').find(".b2b-image").toggleClass('hideb2bimage'); jQuery(this).closest('.col-b2b').find(".b2b-text").toggleClass('expanded'); }); .b2b-image { max-height: 100vh; opacity: 1; transition: all 0.5s ease-in; } .hideb2bimage { max-height: 0; opacity: 0; } .b2b-text { height: 0; opacity: 0; transition: all 0.5s ease-out; } .expanded { height: auto; opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-row"> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=1"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=2"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=3"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> </div>Aquí hay una sugerencia con una transición suave sin ningún parpadeo:
scr a src.b2b-cont para el texto y la imagen.is-active desde la columna principal más cercana . Eliminar .is-active de todas las demás columnasEjemplo:
jQuery(($) => { // DOM ready and $ alias in scope $(".b2b-btn").on("click", function() { const $col = $(this).closest(".col-b2b"); const $otherCol = $(this).closest(".main-row").find(".col-b2b").not($col); $col.toggleClass("is-active"); $otherCol.removeClass("is-active"); }); }); /*QuickReset*/ * {margin:0; box-sizing: border-box;} .main-row { display: flex; } .col-b2b { display: flex; flex-flow: column; flex: 1; } .b2b-cont { flex: 1; position: relative; } .b2b-image { position: absolute; height: 100%; width: 100%; object-fit: cover; transition: 0.3s; } .b2b-text { padding: 1em; visibility: hidden; opacity: 0; transition: 0.3s; } .col-b2b.is-active .b2b-text { visibility: visible; opacity: 1; } .col-b2b.is-active .b2b-image { visibility: hidden; opacity: 0; } <div class="main-row"> <div class="col-b2b"> <div class="b2b-cont"> <img class="b2b-image" src="https://picsum.photos/200/300?random=1"> <p class="b2b-text">this is some text</p> </div> <button class="b2b-btn" type="button">Please Click</button> </div> <div class="col-b2b"> <div class="b2b-cont"> <img class="b2b-image" src="https://picsum.photos/200/300?random=2"> <p class="b2b-text">this is some text</p> </div> <button class="b2b-btn" type="button">Please Click</button> </div> <div class="col-b2b"> <div class="b2b-cont"> <img class="b2b-image" src="https://picsum.photos/200/300?random=3"> <p class="b2b-text">This text, since it's the longest, it dictates all other elements heights thanks to CSS flex. If you learn CSS flex there's no going back, you can only start to learn to cook, pet your cat, dry-leaf-jumping...</p> </div> <button class="b2b-btn" type="button">Please Click</button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Considera lo siguiente.
jQuery(function($) { $(".b2b-btn").click(function() { var btn = $(this); var img = btn.parent().find("img"); var txt = btn.parent().find("p"); var state = txt.hasClass("expanded"); $(".main-row .b2b-text").removeClass("expanded"); $(".main-row .b2b-image").removeClass("hideb2bimage"); if (state) { img.removeClass("hideb2bimage"); txt.removeClass("expanded"); } else { img.addClass("hideb2bimage"); txt.addClass("expanded"); } }); }); .col-b2b { display: inline-block; width: 200px; } .hideb2bimage { display: none; } .b2b-text { display: none; } .expanded { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-row"> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=1"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=2"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> <div class="col-b2b"> <img class="b2b-image" src="https://picsum.photos/200/300?random=3"> <p class="b2b-text">this is some text</p> <button class="b2b-btn">Please Click</button> </div> </div> Usar .toggleClass() puede ser realmente útil en estos casos de uso.
Descripción: agregue o elimine una o más clases de cada elemento en el conjunto de elementos coincidentes, según la presencia de la clase o el valor del argumento de estado.
https://api.jquery.com/toggleclass/
Actualizar
Soy más capaz de entender su necesidad. He actualizado el código anterior para ayudar a determinar el estado actual del texto. Si está expandido, contraerlo. Pero para todos, colapsar el texto y mostrar la imagen independientemente del botón en el que se haga clic.