I want to put this function that is in the html:
onclick="showHide(this)"
but by jquery
https://codepen.io/ygovi/pen/jOWgMGq
HTML:
<div id="div" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
JQUERY JQ:
$('.showHide').hide();
function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle().siblings(".showHide").hide();
}
:( please help
you must retain the behavior: -When I click on the first div with the options class, the corresponding.showHide div is displayed and any other div.showHide that has been opened before is hidden
-And when I click the div of the options class again, the corresponding.showHide div is hidden
Jquery approach: $('.options').click(function(){ $(this).next(".showHide").toggle(); });
and by removing .siblings(".showHide").hide()
other showhide class will be as it is...
$('.showHide').toggle(); $('.options').click(function(){ $(this).next(".showHide").toggle(); }); /*function showHide(btnxxx) { $(btnxxx).next(".showHide").toggle(); }*/
<script src="https://code.jquery.com/jquery-3.5.1.js "></script> <div id="div" class="options" >This is the button.</div> <div id="divcontent" class="showHide">This is a div to hide and show.</div> <div id="div2" class="options" >This is the button.</div> <div id="divcontent2" class="showHide">This is a div to hide and show.</div> <div id="div3" class="options" >This is the button.</div> <div id="divcontent3" class="showHide">This is a div to hide and show.</div>
The problem you mentioned here is due to siblings()
function. Siblings are supposed to be nested in same wrapper.
$('.mi_cuenta_opciones--detalles').hide(); $('.mi_cuenta_opciones--iconos').click(function() { $(this).next(".mi_cuenta_opciones--detalles").toggle().closest('tr').siblings('tr').find('.mi_cuenta_opciones--detalles').hide(); });
table { border: 1px solid #000; }.mi_cuenta_opciones { position: relative; }.mi_cuenta_opciones--iconos { padding-left: 20px; color: #000; }.mi_cuenta_opciones--detalles { width: 144px; height: auto; border: 0.5px solid #ccc; background-color: #fff; /* position: absolute; */ position: absolute; top: 22px; left: 60px; z-index: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Pedido1</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> <tr> <td>Pedido2</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> <tr> <td>Pedido3</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> </table>
$('.showHide').hide(); $('.options').click(function() { $(this).next('.showHide').toggle().siblings('.showHide').hide(); });
<div id="div" class="options">This is the button.</div> <div id="divcontent" class="showHide">This is a div to hide and show.</div> <div id="div2" class="options">This is the button.</div> <div id="divcontent2" class="showHide">This is a div to hide and show.</div> <div id="div3" class="options">This is the button.</div> <div id="divcontent3" class="showHide">This is a div to hide and show.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.