I'm not sure you need javascript here. And I'm not sure why making your cats transparent helps, @ALHAUS. (You're just making your cats disappear, not the comma.) You can actually target the non-linked text, i.e. the comma, in that span with this CSS. The second bit is just making sure your cat doesn't disappear. You just need to fill in your initial color there. Mine is #00bac0.
.summary-metadata-item:not(a) {
color: transparent !important;
}
.summary-metadata-item a {
color: #00bac0 !important;
}
Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */
.accordion-divider {
color: #ff00ff !important;
}
#2. Change Arrows Color
/* accordion arrows color */
.accordion-block .arrow {
border-color: #ffff00 !important;
}
#3. Add icons before Accordion Titles
/* Accordion icons before titles */
li.accordion-item .accordion-item__title:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
}
li.accordion-item:nth-child(1) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg);
}
li.accordion-item:nth-child(2) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg);
}
li.accordion-item:nth-child(3) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg);
}
#4. Different Color for Accordion Titles
/* accordion title colors */
li.accordion-item:nth-child(1) .accordion-item__title {
color: red;
}
li.accordion-item:nth-child(2) .accordion-item__title {
color: blue;
}
li.accordion-item:nth-child(3) .accordion-item__title {
color: violet;
}
#5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */
.accordion-item__description strong {
font-weight: normal;
color: red;
}
#6. Accordion Title Background Color
/* accordion title background */
.sqs-block-accordion .accordion-item__title-wrapper {
background-color: #32a4e6;
}
#7. Accordion Content Background
/* accordion content background */
.sqs-block-accordion .accordion-item__dropdown--open {
background-color: #262853;
color: white;
}
#8. Add Unordered List in Accordion Content
First, add some text then Underline them
Next, use this CSS
/* Accordion Content - Add Unordered list */
span[style*="text-decoration"]:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background-color: black;
vertical-align: middle;
margin-right: 3px;
}
span[style*="text-decoration"] {
text-decoration: none !important;
}
#9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */
li:nth-child(1) span.accordion-item__title:after {
content: "Accordion Subtitle 01";
display: block;
font-size: 15px;
}
li:nth-child(2) span.accordion-item__title:after {
content: "Accordion Subtitle 02";
display: block;
font-size: 15px;
}
li:nth-child(3) span.accordion-item__title:after {
content: "Accordion Subtitle 03";
display: block;
font-size: 15px;
}
Result
#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */
@media screen and (max-width:767px) {
/* accordion title */
span.accordion-item__title {
font-size: 12px !important;
}
/* accordion content */
.accordion-item__description * {
font-size: 10px !important;
}
}
#11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style>
/* accordion title color */
.accordion-item__title-wrapper {
background-color: #1a252f;
color: white;
padding-left: 20px !important;
padding-right: 20px !important;
}
.accordion-item__click-target {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* make first item round corner */
li.accordion-item:first-child .accordion-item__title-wrapper {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* make last item round corner */
li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
/* remove divider between accordion items */
.accordion-divider {
display: none;
}
/* accordion content padding */
.accordion-item__description {
max-width: unset !important;
padding: 20px !important;
}
/* arrows color */
.plus>div {
color: white !important;
}
</style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */
div.accordion-item__description p a {
border-bottom: 1px solid black;
}
/* Links font style */
div.accordion-item__description p a {
color: red !important;
font-size: 30px;
font-family: monospace;
letter-spacing: 2px;
}
#13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */
div.accordion-item__description p a {
background-color: black;
color: white !important;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-color: red;
border-width: 1px;
border-style: solid;
}
#14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */
/* replace demo image with your image url */
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
li:nth-child(1) .accordion-item__description:before {
content: "";
display: block;
width: 100%; /* image width, you can also use px */
height: 150px; /* image height */
background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px; /* space between image-text */
}
#14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg
First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01
Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01');
$('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01');
});
</script>
<style>
.image-01 {
font-size: 0;
}
</style>
Result
If adding 3 images, doing this
and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// image 01
$('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01');
$('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01');
// image 02
$('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02');
$('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02');
// image 03
$('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03');
$('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03');
});
</script>
<style>
[class*="image-0"] {
font-size: 0;
}
</style>
#14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url
highlight the text url > Add same image url (enable Open in New Window)
then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.accordion-item__description p a:contains(".jpg")').each(function() {
var $t = $(this);
$(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
$t.attr({
src: $t.attr('href')
})
.removeAttr('href target');
$(this).replaceWith(function(){
return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
});
});
</script>
<style>
div.accordion-item__description img {
width: 100%;
margin-top: 10px;
}
</style>
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */
:not([data-is-open="true"]) .plus {
background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important;
background-size: contain;
background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
display: none;
}
/* Minus */
[data-is-open="true"] .plus {
background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important;
background-size: contain;
background-repeat: no-repeat;
}
[data-is-open="true"] .plus div {
display: none;
}
#16. Change style of a word on Accordion Title
See this comment
There isn't a preset available for this in the text editor, so you'll need to add your text in a Markdown Block or a Code Block and use HTML. The HTML for superscript is
<sup> </sup>
For example, you could add something like this:
<p>This text contains <sup>superscript</sup> text.</p>
..to achieve this..
This text contains superscript text.
Read more about the HTML here: https://www.w3schools.com/tags/tag_sup.asp
I hope that helps.
Paul
Contributors to this forum voluntarily give their time to help you. If a post helped, please tap on one of the "Like" icons below ↘️
@RyanDejaegher has figured this out and posted the javascript (freshly updated), which works like a charm. Here's a link to his site: https://ryandejaegher.com/remove-current-post-summary-block-squarespace/. This is a huge help.
Thanks @tuanphan, there's a full write up here to understand more about how it works: https://ryandejaegher.com/remove-current-post-summary-block-squarespace/
I should clarify, that this situation is solvable, to a point using the Universal Filter plugin by exposing the .filter-value with CSS, like:
/* -- Expose .filter-value -- */
.custom-filter-container .filterDropdown:not(.outside-values-visible) .outsideFilterValues {display: block;}
This will show the name of the tag or category a user has filtered underneath the filter name.
And this works wherever the filter is applied, but it really should be built in AND developers/clients should have the ability to name the value title, which using Universal Filter can be done within the config script for tags and/or categories, here:
name: 'Filter By Topic',
multiple: true,
capitalcase: true,
getAttr: 'tags'
Also, it's unfathomable to me why Squarespace would make the arbitrary decision to limit how tags and categories can be displayed AND to set character limits to categories.
Perhaps they'll add this back to 7.1 and have some internal reason for not doing so already, but a little more transparency from them would be greatly appreciated, especially with features that have been removed in the transition from 7.0 to 7.1.
This is a maddening issue with 7.1. Not only is there a limitation which only allows for categories to be shown in a blog section and NOT tags, but whenever something is filtered there's no way to show a user where they are, like in 7.0.
Even using the fantastic Universal Filter: https://www.squarewebsites.org/products/universal-filter
This seemingly arbitrary limitation feels impossible to solve.
Why Squarespace? Why?!
If anyone has a solution for this I'd like to know.
Thanks!
I really wish Squarespace would hurry up and roll out this feature. The ShareThis buttons are ugly and criminally outdated. They looked cool in 2009, not so much now.