get some div text block to show when a plus button is clicked-CodePudding

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  data-id="441" data-itemtype="picture">

<div data-imagetype="" data-urlvariable="1" data-sentattribute="price" data-       variablename="" data-shadowfx="0" data-html="true"  >

<img data-no-lazy="1" data-tint="false" src="https://testing.secureyourticket.com/wp-content/plugins/WP_Estimation_Form/assets/img/placeholder.png" alt="" >
<span ></span>
</div>

<p >Google Analytics</p><p  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

CodePudding user response：

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 >Some context</div>
<div >Description on the topic</div>

CodePudding user response：

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 ></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  data-id="441" data-itemtype="picture">
  <p >Google Analytics</p>
  <p  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  data-id="441" data-itemtype="picture">
  <p >Something else w/ no description</p>

</div>

<div  data-id="441" data-itemtype="picture">
  <p >Something else w/ description</p>
  <p  style="
">Blah blah blah.</p>
</div>