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
  • 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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

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
On 12/3/2022 at 2:33 AM, THESC said:

The page url doesn't exist. Have you enabled page yet?

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

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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

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

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

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.