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 providing more information on click. Click on More information to explore what this is in the example below.

To add collapsible sections like the ones in our example:

1

Go to the Cards settings and turn on Customize Cards HTML from the Advanced options.

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 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 class="image-container">
        <div class="image" style="background-image: url({{Image}})">
        </div>
</div>

3

First of all, let's look at our data. We have columns with textual data and one with images.

To create our collapsible section, we used DigitalOcean's code for a pure CSS collapsible and pasted it into our custom HTML area, with some input from Claude:

<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">{{Behavior}}</h3>
    <h3 class="subtitle">{{Region}}</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> {{Descr}}</p>
        </div>
    </div>
</div>

<style>

h1 { 
    text-align: center; 
    color:#ffffff;}

h3{
    color:#ffffff;
    font-size: 1;
    font-weight: 100;
    text-align: center;
    text-decoration: none;
}


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


input[type='checkbox'] { 
    display: none;
} 
.wrap-collabsible { 
    margin: 1.5rem 0; 
} 
.lbl-toggle {
     display: block; 
     font-weight: bold; 
     text-align: center; 
     padding: 1rem; 
     color: #DDD; 
     cursor: pointer; 
     border-radius: 7px; 
     transition: all 0.35s 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: 300vh; 
} 
.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 
.collapsible-content .content-inner {
    background-color: inherit;
    color: #FFFFFF;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px; padding: .5rem 1rem; 
    }
.collapsible-content p {
    margin-bottom: 0; 
}




</style>

4

As our custom HTML now refers to a few columns that don't yet exist, we have to add those.

• color for the background color of the collapsible area
• collapsible for a unique ID for each row/card

Descr is the column that contains the content that should display in the collapsible area 

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.