Dropdowns / Accordions 1

<h3>Table of Contents</h3>

<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">

<svg xmlns="http://www.w3.org/2000/svg">

<symbol viewBox="0 0 24 24" id="expand-more">

<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path><path d="M0 0h24v24H0z" fill="none"></path>

</symbol>

<symbol viewBox="0 0 24 24" id="close">

<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path>

</symbol>

</svg>

</div>

<details>

<summary>

The Engagement

<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>Every love story is unique. With sensory prompts brides will be able to relive their engagement with great detail time again as they reflect on their story for years to come.

</p>

</details>

<details>

<summary>

My Vision <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>The big day, honeymoon, and future life together. There is so much to dream about! Reflecting and creating visions help brides recognize how powerful they are in creating their future.

</p>

</details>

<details>

<summary>

Plans and Parties

<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>Events and moments end, but memories last forever. Brides are able to savor every emotion from the precious plans and celebrations leading up to the wedding day.

</p>

</details>

<details>

<summary>

My Love for you - A gift for the Love of your Life

<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>Brides get to focus on their “why” of marriage and write about their love. Together it creates a strong foundation for their wedding vows and a gift to present to their love on the big day.

</p>

</details>

<details>

<summary>

The Countdown

<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>Tears of joy, laughter, and countless emotions. That is what weddings are all about. Tips and tricks are provided to help brides stay grounded as they clear up mental space and remain focused on their connection.

</p>

</details>

<details>

<summary>

Our Big Day <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>The months of preparing and visualizing have come to an end. Presence and living in the moment is top of the priority list. Prompts are designed to help brides tune in and reflect on the best day of their life.

</p></details>

<details>

<summary>

Our New Chapter

<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more"></use></svg>

<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg>

</summary>

<p>As a newlywed couple there is space to reflect on the “I Do” Journey as well as dream about the future. Reflecting and dreaming will become a new anniversary tradition.

</p>

</details>

<style>

body {

font-family: "Libre Baskerville", sans-serif;

background: rgba( 255, 225, 225, 0.7 );

}

h3 {

margin: 10px auto 10px;

font-size: 26px;

font-weight: 300;

text-align: center;

letter-spacing: 1px;

line-height: 1.3;

}

details {

width: 75%;

min-height: 5px;

max-width: 700px;

padding: 30px 60px 30px 30px;

margin: auto;

position: relative;

font-size: 18px;

border: 1px solid rgba(0,0,0,.1);

border-radius: 15px;

box-sizing: border-box;

transition: all .3s;

}

details + details {

margin-top: 20px;

}

details[open] {

min-height: 50px;

background: rgba( 255, 255, 255, 0.25 );

box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );

backdrop-filter: blur( 6.0px );

-webkit-backdrop-filter: blur( 6.0px );

border-radius: 10px;

border: 1px solid rgba( 255, 255, 255, 0.18 );

}

details p,li {

color: #81784f;

font-weight: 300;

}

summary {

display: flex;

justify-content: space-between;

align-items: center;

font-weight: 500;

cursor: pointer;

}

summary:focus {

outline: none;

}

summary:focus::after {

content: "";

height: 100%;

width: 100%;

display: block;

position: absolute;

top: 0;

left: 0;

box-shadow: 0 0 0 2px #ff8a6350;

border-radius: 10px;

}

summary::-webkit-details-marker {

display: none

}

.control-icon {

fill: rebeccapurple;

transition: .3s ease;

pointer-events: none;

}

.control-icon-close {

display: none;

}

details[open] .control-icon-close {

display: initial;

transition: .3s ease;

}

details[open] .control-icon-expand {

display: none;

}

</style>