CSS not applying to summary items on Lazy Summaries

Does anyone know why my CSS is not applying to summary items after the Load More button and how I can fix it?

I'm using Universal Filter, Lazy Summaries, and a js snippet for hiding/showing content on selection. 

Thanks 🙂

Strange problem, have you tried the plugin support forum? It's an issue that has probably come up there already: https://squarewebsites.slack.com/join/shared_invite/zt-1g24gqlgy-5GhVXknjGXe_gGijC8ARDQ#/shared-invite/email

15 hours ago, Ziggy said:

Strange problem, have you tried the plugin support forum? It's an issue that has probably come up there already: https://squarewebsites.slack.com/join/shared_invite/zt-1g24gqlgy-5GhVXknjGXe_gGijC8ARDQ#/shared-invite/email

Hey Ziggy, thanks for sending through the link. Yeah I posted it in their support forum last week but hasn't been solved yet. I know Michael gets so many requests, so thought I'd try asking here rather than adding more weight on his plate. 🙂 

On 11/23/2022 at 8:33 AM, melaniejaane said:

Hey Ziggy, thanks for sending through the link. Yeah I posted it in their support forum last week but hasn't been solved yet. I know Michael gets so many requests, so thought I'd try asking here rather than adding more weight on his plate. 🙂 

Which CSS code did you use + link to your site? We can check easier

Site: https://www.beehyve.health/adhd-support

Hey @tuanphan I received this response on the plugin support forum:

Quote

"From what I can see, the issue isn’t CSS, it’s the jQuery you are using for the accordion style function. This function only modifies the elements that are already on the page, but when you click load more, it doesn’t run again. You’d need to re-write or run it again on ‘load more’ by using one of the hooks in the plugin."

Seems to be issue with the JQuery you helped with on other question (below) not targeting posts below load more button. Would you please be able to help me hook this in?

This is the final code snippet I used for the dropdown / accordion feature.

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0;
    overflow: hidden;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none;
}
  .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>

Thanks so much again! 🙂 

On 11/26/2022 at 6:11 AM, melaniejaane said:

Site: https://www.beehyve.health/adhd-support

Hey @tuanphan I received this response on the plugin support forum:

Seems to be issue with the JQuery you helped with on other question (below) not targeting posts below load more button. Would you please be able to help me hook this in?

This is the final code snippet I used for the dropdown / accordion feature.

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0;
    overflow: hidden;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none;
}
  .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>

Thanks so much again! 🙂 

Can you share link to page where you have problem? We can adjust code easier

19 hours ago, tuanphan said:

Can you share link to page where you have problem? We can adjust code easier

@tuanphan Sorry link was at the beginning, it's Site: https://www.beehyve.health/adhd-support 

Thanks so much!

Hey @tuanphan have you had any luck amending this code to work with items below load more button? Thanks so much!
Site: https://www.beehyve.health/adhd-support 

On 12/9/2022 at 3:31 AM, melaniejaane said:

Hey @tuanphan have you had any luck amending this code to work with items below load more button? Thanks so much!
Site: https://www.beehyve.health/adhd-support 

Sorry, forgot your question. I will check & let you know soon.

@tuanphan hi just wondering if it's possible to change your JQuery so it also applies to summary items after the 'load more' button?

https://www.beehyve.health/adhd-support

Current code:

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0;
    overflow: hidden;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none;
}
  .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>