Adding dropdown/accordion with images inside

jamesmabrown · January 8, 2021

Hello,

I'm trying to add an accordion/dropdown to a website (it's still in trial at the moment so can't share web link). It is going to be used on a page showing the team of a company, so within each entry it also needs to include a picture of them.

I have used the standard markdown used for an accordion, which by itself (without an image in it) works fine. I have then used an HTML image reference within it, and when it does this, only the first name appears. And when it is opened/clicked, the next name then appears below it (and so forth). But then when you close the top name, they all disappear (apart from the top one).

I have also tried created an animated collapsible using HTML, CSS and Java (https://www.w3schools.com/howto/howto_js_collapsible.asp). This code was copied exactly, using a code block for the HTML, adding the CSS into the custom CSS, and adding the Javascript into the page specific code injection. The list options are created, but don't actually open when clicked on.

If anyone can provide any insight into how to get either of these solutions to work that would be greatly appreciated. Screenshots are attached for reference.

To confirm, I'm using the Henson template.

Many thanks,

James

jamesmabrown · January 18, 2021

Just an update, this has now been resolved. For anyone that wants to do something similar in the future, the full code is here.

HTML here
<div class="row">
  <div class="col">
    <h1>Heading here</b></h1>
    <div class="tabs">
      <div class="tab">
        <input type="checkbox" id="chck1">
        <label class="tab-label" for="chck1">
			<h2>Title here.
			</h2>
		</label>
        <div class="tab-content">
          <div class="container">
            
        
		<img src="URL" class="container__image"> <div class="container__text">
            <p>
Some internal content here.
            </p>

            </div>
  </div>

        </div>
      </div>
      <div class="tab">
        <input type="checkbox" id="chck2">
        <label class="tab-label" for="chck2"><h2>
          
          A title here</h2></label>
        <div class="tab-content">
          <div class="container">
            
        
		<img src="URL" class="container__image"> <div class="container__text">
            <p>
Some internal content here.
            </p>

            </div>
  </div>
        </div>
      </div>
      
      
/*CSS here*/
      
      // General

input {
  position: ;
  opacity: 0;
  z-index: -1;
}
// Layout
.row {
  display:flex;
  .col {
    flex:1;
    &:last-child {
      margin-left: 1em;
    }
  }
}
/* Accordion styles */
.tabs {
  border-radius: 0px;
  overflow: hidden;
}
.tab {
  width: 100%;
  color: ;
  overflow: hidden;
  &-label {
    display: flex;
    padding: 1em;
    background: ;
    justify-content: space-between;
    font-weight: bold;
    border-bottom: 1px solid #f7b8a1; 
  	padding-bottom:20px;
    cursor: pointer;
/* Icon */
    &:hover {
      background: ;
    }
    &::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all .35s;
    }
  }
  &-content {
    max-height: 0;
    padding: 0 0em;
    color: ;
    background: ;
    transition: all .35s;
  }
  &-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: ;
    cursor: pointer;
    &:hover {
      background: ;
    }
  }
}

// :checked
input:checked {
  + .tab-label {
    background: ;
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 150vh;
    padding-top: 10px;
}
  }
      
      .container {
  &__image {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin-right: 25px;
    position: relative;
    min-width: 200px;
    margin-bottom: 20px;
  }
  &__text {
    display: inline-block;
    width: 60%;
    font-size: 1.3em;
    overflow: visible;
    @media (max-width: 1000px) {
      width: 100%;
    }
  }
}

tuanphan · January 10, 2021

Hi. If you can share site url, we can check easier.

If your site is private/trial, you can setup password & share url.

If you can't share url, you can consider using this Accordion Plugin. It has more options & easy to install.

jamesmabrown · January 12, 2021

Hi @tuanphan,

There is a link to the site here: https://nectarine-tuba-pgnf.squarespace.com/contact-us-3
PW: PeoplePlacePurpose

I have managed to find a solution to it, using HTML and CSS, but have now run in to the issue that it does not scale properly for mobile (i.e. the content cuts off and cannot be scrolled), and I also can't align the IMG within the content without it affecting the rest of the dropdown. Ideally I'd have the image fixed left (or right) with the text flowing next to it. As a reference, I want to try and get this (https://nectarine-tuba-pgnf.squarespace.com/contact-us-5-grid-2) but collapsible.

If you can provide any advice it would be greatly appreciated.

All best,

James

Edited January 12, 2021 by jamesmabrown
providing reference

tuanphan · January 13, 2021

20 hours ago, jamesmabrown said:

Hi @tuanphan,

There is a link to the site here: https://nectarine-tuba-pgnf.squarespace.com/contact-us-3
PW: PeoplePlacePurpose

I have managed to find a solution to it, using HTML and CSS, but have now run in to the issue that it does not scale properly for mobile (i.e. the content cuts off and cannot be scrolled), and I also can't align the IMG within the content without it affecting the rest of the dropdown. Ideally I'd have the image fixed left (or right) with the text flowing next to it. As a reference, I want to try and get this (https://nectarine-tuba-pgnf.squarespace.com/contact-us-5-grid-2) but collapsible.

If you can provide any advice it would be greatly appreciated.

All best,

James

Hi,

Which code did you use? Can you post here? We will try tweaking it.

jamesmabrown · January 13, 2021

Hi @tuanphan,

The HTML is here:

<div class="row">
  <div class="col">
    <h1>OUR TEAM</b></h1>
    <div class="tabs">
      <div class="tab">
        <input type="checkbox" id="chck1">
        <label class="tab-label" for="chck1">
			<h2>Thomas Rose, Co-Founder
			</h2>
		</label>
        <div class="tab-content">
			           <img src="https://i.ibb.co/ZXt6CVT/Screenshot-2021-01-07-at-17-14-58.png" align=”left” style=”margin: 0px 10px 0px 0px;” width="300px">
          Thomas Co-founded P-THREE in 2019 after working as head of Leisure & Restaurants at Cushman & Wakefield for 13 years.<br>

Thomas has worked on projects across the UK and Europe including Battersea Power Station, Waterloo.London, Savarin Prague, Potsdamer Platz Berlin, Trocadero Estate, Wembley Park and Kensington Olympia. Thomas has advised private equity groups on over £1billion of acquisitions and retained mandates for Third Space, Wahaca, Rosa’s Thai, Chipotle and Puttshack.<br>

Thomas is a member of RICS and a Committee Member of the Leisure Property Forum.
          




        </div>
      </div>
      <div class="tab">
        <input type="checkbox" id="chck2">
        <label class="tab-label" for="chck2"><h2>
          
          Justin Taylor, Co-Founder</h2></label>
        <div class="tab-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
      </div>
    </div>
  </div>

and the CSS is here:

// General

input {
  position: ;
  opacity: 0;
  z-index: -1;
}
// Layout
.row {
  display:flex;
  .col {
    flex:1;
    &:last-child {
      margin-left: 1em;
    }
  }
}
/* Accordion styles */
.tabs {
  border-radius: 0px;
  overflow: hidden;
}
.tab {
  width: 100%;
  color: ;
  overflow: hidden;
  &-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: ;
    font-weight: bold;
    border-bottom: 1px solid #f7b8a1; 
  	padding-bottom:20px;
    cursor: pointer;
/* Icon */
    &:hover {
      background: ;
    }
    &::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all .35s;
    }
  }
  &-content {
    max-height: 0;
    padding: 0 0em;
    color: ;
    background: ;
    transition: all .35s;
  }
  &-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: ;
    cursor: pointer;
    &:hover {
      background: ;
    }
  }
}

// :checked
input:checked {
  + .tab-label {
    background: ;
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 100vh;
    padding-top: 10px;
  }
}

Many thanks,
James

jamesmabrown · January 13, 2021

Hi @tuanphan,

Just an update on the above as I have been playing around with it this morning. Increasing the max-height in .tab-content from 100vh to 300vh seems to have solved the overflowing issue.

If you can shed any light on the image alignment though that would be greatly appreciated!

All best,

James

tuanphan · January 17, 2021

It looks like you solved?

jamesmabrown · January 17, 2021

Partially, though there's still issues. For some reason each dropdown option now scrolls within itself. If you can offer any insight that would be great, but no worries if not!

tuanphan · January 20, 2021

If you use Personal Plan, you can use above code

If you use Business Plan or higher + have budget, you can use this  Accordion plugin. You can achieve above easier with Image Block + Text Block.

alejoreinoso · September 3, 2021

Hello,

I tried this example and it works, but mobile version go to hell. Is there any extra code to solve this mobile problem? Or the best way is to buy a plugin? Thank you.

tuanphan · September 5, 2021

On 9/4/2021 at 12:30 AM, alejoreinoso said:

Hello,

I tried this example and it works, but mobile version go to hell. Is there any extra code to solve this mobile problem? Or the best way is to buy a plugin? Thank you.

Hi,

What problem on mobile? Can you describe & share link to page where you have problem?

alejoreinoso · October 11, 2021

Thank you @tuanphan for the answer. Sorry for the delay but client change his mind so I solved the problem.
Now I am trying to look for some guide (or maybe someone who can do it for us) to have a section where we can compare some products , best example, something like this: https://www.apple.com/iphone/compare/

Is there a way to do it on Squarespace?

tuanphan · October 13, 2021

On 10/12/2021 at 2:26 AM, alejoreinoso said:

Thank you @tuanphan for the answer. Sorry for the delay but client change his mind so I solved the problem.
Now I am trying to look for some guide (or maybe someone who can do it for us) to have a section where we can compare some products , best example, something like this: https://www.apple.com/iphone/compare/

Is there a way to do it on Squarespace?

I think this is require a lot of code. You should post this on some FB groups to hire some devs

Squarespace Customization Resource Group
Squarespace Community

(I don't offer service)

laurensmithart · December 15, 2021

I used this code and it works great. However; I notice in this example the checkbox isn't appearing, but on mine there is a visible checkbox which I would prefer wasn't there. (see attached) When I isolate the "checkbox" input in the code and remove it the accordion no longer opens. Is there a way I can remove or hide the checkbox?

Thank you!

tuanphan · December 17, 2021

On 12/16/2021 at 1:09 AM, laurensmithart said:

I used this code and it works great. However; I notice in this example the checkbox isn't appearing, but on mine there is a visible checkbox which I would prefer wasn't there. (see attached) When I isolate the "checkbox" input in the code and remove it the accordion no longer opens. Is there a way I can remove or hide the checkbox?

Thank you!

If you share link to page in screenshot, we can give the code to hide checkbox.

laurensmithart · December 20, 2021

On 12/17/2021 at 8:17 AM, tuanphan said:

If you share link to page in screenshot, we can give the code to hide checkbox.

Thanks, the link is: https://www.thehost.co/product-recommendations

tuanphan · December 22, 2021

On 12/21/2021 at 12:23 AM, laurensmithart said:

Thanks, the link is: https://www.thehost.co/product-recommendations

Add to Design > Custom CSS

/* Hide tab input */
div.tabs .tab input {
    opacity: 0;
}

laurensmithart · January 10

On 12/22/2021 at 4:34 AM, tuanphan said:
Add to Design > Custom CSS
/* Hide tab input */
div.tabs .tab input {
    opacity: 0;
}

That worked like a charm- thank you!

laurensmithart · January 10

One more question... Is there a way to make this two columns? I keep trying to split the code up and place the blocks next to each other but when I view it live it is all one column.

tuanphan · January 12

On 1/10/2022 at 11:59 PM, laurensmithart said:

One more question... Is there a way to make this two columns? I keep trying to split the code up and place the blocks next to each other but when I view it live it is all one column.

Use this code

/* product recommendations */
@media screen and (min-width:768px) {
.tabs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}

laurensmithart · January 12

17 hours ago, tuanphan said:

Use this code

/* product recommendations */
@media screen and (min-width:768px) {
.tabs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}

The code works great for the columns; however when I click on an item in the list it not only opens itself but another item as well. Can you check the glitch out and let me know if there's any code to correct this?

https://www.thehost.co/product-recommendations

tuanphan · January 14

On 1/13/2022 at 5:42 AM, laurensmithart said:

The code works great for the columns; however when I click on an item in the list it not only opens itself but another item as well. Can you check the glitch out and let me know if there's any code to correct this?

https://www.thehost.co/product-recommendations

Remove above & try this new code

/* product recommendations */
@media screen and (min-width:768px) {
.tabs {
    column-count: 2;
}
}

laurensmithart · January 21

On 1/14/2022 at 10:17 AM, tuanphan said:
Remove above & try this new code
/* product recommendations */
@media screen and (min-width:768px) {
.tabs {
    column-count: 2;
}
}

Thank you!

alyssazack · March 8

Hi, When I add this code for the accordion block with images it messes up my text blocks across the whole website. Please help!

https://chartreuse-armadillo-lwys.squarespace.com/menu

password: TCR-2022

tuanphan · March 10

On 3/8/2022 at 8:11 AM, alyssazack said:

Hi, When I add this code for the accordion block with images it messes up my text blocks across the whole website. Please help!

https://chartreuse-armadillo-lwys.squarespace.com/menu

password: TCR-2022

A lot of code in this topic. Which code did you use?

Adding dropdown/accordion with images inside

Question

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

jamesmabrown

tuanphan

Posted Images

25 answers to this question

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Support

Community

Developers

Resources