I am working on a wordpress costing form but really struggling with the responsive view as ive used text descriptions to explain the products. Is it possible that you know some code where i can put a plus button next to the title of the products. When i press the plus button the small description will show underneath the title.There are multiple products with title and small description. I have done two screenshots to show what i mean How it looks with small description https://pasteboard.co/xNRq4SCqcYpp.png. How i need it to look https://pasteboard.co/20OrgDInhwWa.png.
I presume it would be an if statement to say if lfb_itemBloc contains lfb_itemDes display none and generate a plus icon and only display lfb_itemDes when plus button is clicked.
The code in question is below
<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>
Thanks in advance
Not so complicated. Among many different ways you may do a variant of the following.
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>It's pretty straightforward. Assuming the HTML will get written first and you need to do all this after the fact - first insert the icon, then apply a click action. On that we can find the related description through .closest() and .find(). Then you can also toggle the font-awesome icon as well.
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>