How to add a collapsible section with custom HTML

Using our custom HTML setting, you can add extra magic to your cards – for example a collapsible section. Click on "More information" to explore what this is in the below example.

To add a collapsible section like in our example,

1
Go to the Cards settings and select "Customise Cards HTML" from the Advanced settings. 
2
Your Cards might slightly change in appearance after this change. For example, if you're using images, those might have disappeared. This is because the code from the custom HTML section is now being used to fill your cards and some of the column names or custom HTML might no longer be the same ones as in your data sheet. First, we're going to fix our images by replacing column_name with the name of the column containing your images. In our case, this is Image. Here's what the beginning our HTML looks like now: 

<div>
<div style="background-image: url({{Image}})">
</div>
</div>
3
To create our collapsible section, we used DigitalOcean's code for a pure CSS collapsible and pasted it into our custom HTML area: 
<div class="image-container">
        <div class="image" style="background-image: url({{Image}})">
        </div>
</div>

<div class="primary">
    <h1 class="title">{{Name}}</h1>
    <h3 class="subtitle">{{Role}}</h3>
    <h3 class="subtitle">{{Info}}</h3>
</div>

<div class="wrap-collabsible"> 
    <input id="{{collapsible}}" class="toggle" type="checkbox"> 
    <label for="{{collapsible}}" class="lbl-toggle">More information</label>
    <div class="collapsible-content">
        <div class="content-inner" style="background-color: {{color}}">
            <p> {{Quote}}</p>
        </div>
    </div>
</div>

<style>

.primary{
 display : flex !important;
 order : inherit !important;
 flex-direction: column;
}

input[type='checkbox'] { 
    display: none;
} 
.wrap-collabsible { 
    margin: 1.2rem 0; 
} 
.lbl-toggle {
     display: block; 
     font-weight: bold; 
     text-align: center; 
     padding: 1rem; 
     color: #DDD; 
     cursor: pointer; 
     border-radius: 7px; 
     transition: all 0.25s ease-out; 
} 
.lbl-toggle:hover {
     color: #FFF; 
}
.lbl-toggle::before {
    content: ' '; 
    display: inline-block; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid currentColor; 
    vertical-align: middle; 
    margin-right: .7rem; 
    transform: translateY(-2px); 
    transition: transform .2s ease-out; 
}
 .toggle:checked+.lbl-toggle::before { 
    transform: rotate(90deg) translateX(-3px); 
}
 .collapsible-content { 
     max-height: 0px; 
     overflow: hidden; 
     transition: max-height .25s ease-in-out;
 } 
 .toggle:checked + .lbl-toggle + .collapsible-content {
      max-height: 100vh; 
} 
.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 
.collapsible-content .content-inner {
    color: #FFFFFF;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px; padding: .5rem 1rem; 
    }
.collapsible-content p {
    margin-bottom: 0; 
}

</style>

<br>
4
As our custom HTML now refers to a few columns that don't yet exist, we have to add those.
  • Quote for the content that should display in the collapsible area
  • color for the background color of the collapsible area
  • collapsible for a unique ID for each row
You can also give your columns different names, but make sure you update the column names in the double curly brackets if you do. 

Note that if you have spaces in your column names, you will have to add them in square and curly brackets like this: {{[Collapsible content]}}

Click here to duplicate the example visualization.

Related Articles