Jump to content

CSS not applying to summary items on Lazy Summaries

Go to solution Solved by melaniejaane,

Recommended Posts

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment
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. 🙂 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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! 🙂 

Edited by melaniejaane
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@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------>

 

 

Link to comment
  • 1 month later...
  • Solution
<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {    
$(document).on("click", ".summary-item", function () {
    $(this).toggleClass('tp-list-des-open');
})
   })

</script>

<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0!important;
    overflow: hidden!important;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none!important;
}
  .tp-list-des-open .summary-excerpt p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%!important;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block!important;
}

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

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

Wanted to post the solution for others looking in the future.
Thank you to Michael the The Lazy Summaries plugin creator for fixing the first couple lines of code and making this snippet work! 😄

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.