Jump to content

Creating Two Columns in Accordion

Recommended Posts

Hi, I used your code below to create two columns (which is great) - but is there an edit you could make so the two columns only apply to the second item in the accordion and not the first??

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}
Link to comment
  • Replies 13
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

3 hours ago, THESC said:

Hi, I used your code below to create two columns (which is great) - but is there an edit you could make so the two columns only apply to the second item in the accordion and not the first??

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Not quite sure how I would go about sharing but have attached some screen shots. I'd like to the 1st paragraph of the accordion, below 'Description' to be one column of text with the second part of the accordion, 'Amenities', to remain as two columns....Hope that helps!! 

Acc1.jpg

Acc2.jpg

Link to comment
1 hour ago, THESC said:

Not quite sure how I would go about sharing but have attached some screen shots.

If you share the URL in your browser and set up a site wide password and share that here, we can look at the site to help, follow this guide:

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 11/29/2022 at 2:29 AM, THESC said:

The site is live so I don't want to put a password on it, if it can't be done then not to worry, I will be able to live with it! Thanks

I don't see your site url. Can you share it? We can check problem easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi, I've actually decided not to continue with that idea however, there is something else you can hopefully help with?! I have a grid of images that I would like to have the images zoom on hover (with no overlay). I tried another piece of code but I wasn't able to use the images as a link with that code in place....Any ideas? Also, I'd like the code to just apply to the grid block and not the other images at the top of the page....

https://www.thepureexperience.gr/porto-heli

Thanks! 

Link to comment

You can try this Custom CSS: 

#collection-638332fe269e9c76e6791f3a {
  .sqs-block-image img {
    transform:scale(1);
    transition:ease-in-out 300ms;
    -webkit-transition:ease-in-out 300ms;
  }
  .sqs-block-image:hover img {
    transform:scale(1.5);
  }
}

Give me a thumbs up if that works for you!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 12/7/2022 at 9:32 PM, Ziggy said:

You can try this Custom CSS: 

#collection-638332fe269e9c76e6791f3a {
  .sqs-block-image img {
    transform:scale(1);
    transition:ease-in-out 300ms;
    -webkit-transition:ease-in-out 300ms;
  }
  .sqs-block-image:hover img {
    transform:scale(1.5);
  }
}

Give me a thumbs up if that works for you!

The link tag cover image, so image-block hover won't work.

On 12/8/2022 at 1:19 AM, THESC said:

Unfortunately no joy! 

Add to Design > Custom CSS

div#page-638332fe269e9c76e6791f3a a:hover img {
    transform: scale(1.3) !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 12/10/2022 at 11:11 PM, THESC said:

Thanks! This works when I apply it to the individual image ID but ideally I would like to apply it to the whole block so it applies to all of the images, as there are a lot of individual images! Any ideas?

The ID in my code is ID of section, not ID of individual images

so It should work for all Images

Can you check it again?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.