Estoy trabajando en un formulario de cálculo de costos de wordpress, pero realmente tengo problemas con la vista receptiva, ya que he usado descripciones de texto para explicar los productos. ¿Es posible que conozca algún código donde pueda poner un botón más junto al título de los productos? Cuando presiono el botón más, se mostrará una pequeña descripción debajo del título. Hay varios productos con título y una pequeña descripción. Hice dos capturas de pantalla para mostrar lo que quiero decir Cómo se ve con una pequeña descripción https://pasteboard.co/xNRq4SCqcYpp.png . Cómo necesito que se vea https://pasteboard.co/20OrgDInhwWa.png .
Supongo que sería una declaración if decir si lfb_itemBloc contiene lfb_itemDes mostrar ninguno y generar un ícono más y solo mostrar lfb_itemDes cuando se hace clic en el botón más.
El código en cuestión está abajo.
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture"> <div data-imagetype="" data-urlvariable="1" data-sentattribute="price" data- variablename="" data-shadowfx="0" data-html="true" class="lfb_selectable" > <img data-no-lazy="1" data-tint="false" src="https://testing.secureyourticket.com/wp-content/plugins/WP_Estimation_Form/assets/img/placeholder.png" alt="" class="lfb_selectableImg img .png"> <span class="fas fa-times icon_select"></span> </div> <p class="lfb_imgTitle ">Google Analytics</p><p class="lfb_itemDes " style=" ">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p> </div>Gracias por adelantado
No tan complicado. Entre muchas maneras diferentes, puede hacer una variante de lo siguiente.
var elmt = document.querySelector(".stg"), desc = document.querySelector(".desc"); elmt.addEventListener("click", e => desc.style.display = desc.style.display === "block" ? "none" : "block"); .stg { pointer-events: none; } .stg:after { content: " +"; pointer-events: all; } .desc{ content: "Some Description"; display: none; font-size: 0.67em; } <div class="stg">Some context</div> <div class="desc">Description on the topic</div>Es bastante sencillo. Suponiendo que el HTML se escribirá primero y debe hacer todo esto después del hecho: primero inserte el ícono, luego aplique una acción de clic. En eso podemos encontrar la descripción relacionada a través .closest() y .find() . Luego, también puede alternar el ícono de fuente increíble.
let insertExpand = `<span class="fa fa-plus expand-icon"></span>`; jQuery(function($) { $('.lfb_itemDes').each(function() { if ($(this).text().trim() !== '') { $(insertExpand).insertBefore($(this).closest('.lfb_item').find('.lfb_imgTitle')); } }) $('.expand-icon').click(function() { $(this).closest('.lfb_item').find('.lfb_itemDes').toggle(); if ($(this).hasClass('fa-plus')) $(this).removeClass('fa-plus').addClass('fa-minus'); else $(this).removeClass('fa-minus').addClass('fa-plus'); }) }) .lfb_itemDes { display: none; } .expand-icon { cursor: pointer; float: right; } .lfb_item { width: 300px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> <div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture"> <p class="lfb_imgTitle">Google Analytics</p> <p class="lfb_itemDes" style=" ">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p> </div> <div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture"> <p class="lfb_imgTitle">Something else w/ no description</p> </div> <div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture"> <p class="lfb_imgTitle">Something else w/ description</p> <p class="lfb_itemDes" style=" ">Blah blah blah.</p> </div>