<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<!-- Ion Icon  -->
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <div class="envase">
            <div class="bandoneon">
                <div class="bandoneon-item" id="tema1">
                        <a class="bandoneon-link" href="#tema1">
                            Theme 1
                            <ion-icon class="add" name="add-outline"></ion-icon>
                            <ion-icon class="remove" name="remove-outline"></ion-icon>
                        </a>
                        <div class="relleno">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ab itaque aliquam hic adipisci officia vel! Quidem rerum, necessitatibus maiores excepturi illo? Dolore eligendi, autem nihil doloremque! Numquam autem, similique.</p>
                        </div>
                </div>
                
                    <div class="bandoneon-item" id="tema2">
                        <a class="bandoneon-link" href="#tema2">
                            Subject 2
                            <ion-icon class="add" name="add-outline"></ion-icon>
                            <ion-icon class="remove" name="remove-outline"></ion-icon>
                        </a>
                        <div class="relleno"><ul>
                            <li> Quidem rerum, necessitatibus maiores</li>
                            <li> Beatae ab itaque aliquam hic</li>
                            <li> Dolore eligendi, autem nihil doloremque!</li>
                            <li> Lorem ipsum dolor sit amet</li>
                            <li> Numquam autem, similique</li>
                            <li> Adipisci officia vel! Quidem rerum, necessitatibus maiores excepturi</li>
                            <li> Maiores excepturi illo? Dolore!</li>
                            </ul>
                        </div>
                    </div>
    
                    <div class="bandoneon-item" id="tema3">
                        <a class="bandoneon-link" href="#tema3">
                            Topic 3
                            <ion-icon class="add" name="add-outline"></ion-icon>
                            <ion-icon class="remove" name="remove-outline"></ion-icon>
                        </a>
                        <div class="relleno">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ab itaque aliquam hic adipisci officia vel!</p>
                        </div>
                    </div>
                
                
                    <div class="bandoneon-item" id="tema4">
                        <a class="bandoneon-link" href="#tema4">
                            Problem 4
                            <ion-icon class="add" name="add-outline"></ion-icon>
                            <ion-icon class="remove" name="remove-outline"></ion-icon>
                        </a>
                        <div class="relleno">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ab itaque aliquam hic adipisci officia vel! Quidem rerum, necessitatibus maiores excepturi illo? Dolore eligendi, autem nihil doloremque! Numquam autem, similique.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ab itaque aliquam hic adipisci officia vel! Quidem rerum, necessitatibus maiores excepturi illo? Dolore eligendi, autem nihil doloremque! Numquam autem, similique.</p>
                        </div>
                </div>
                
                
                    <div class="bandoneon-item" id="tema5">
                        <a class="bandoneon-link" href="#tema5">
                            Stuff 5
                            <ion-icon class="add" name="add-outline"></ion-icon>
                            <ion-icon class="remove" name="remove-outline"></ion-icon>
                        </a>
                        <div class="relleno">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ab itaque aliquam hic adipisci officia vel! Quidem rerum, necessitatibus maiores excepturi illo? Dolore eligendi, autem nihil doloremque! Numquam autem, similique.</p>
                        </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>    



/* ======= o manrique - aug 2020 ========= */
/* ============= bandoneon =============== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:inherit;
}
ul {
    list-style-type: square;
    padding: 0 0 1rem 3rem;
    margin-left:2rem;
}
ul>li{
    color:rgba(0,0,0,.6);
    font-size: 1.4rem;
    padding:0 1rem 1rem 2rem; 
}
html{
    font-family: "Roboto", sans-serif;
    font-size:10px;
    box-sizing: border-box;
}

section{
    height:100vh;
    width:100%;
    background-color:#eeeeee;
    display:flex;
    align-items:center;
    justify-content:center;
}

.envase{
    width:100%;
    max-width:80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bandoneon-item{
    background-color: #d4d4d4;
    padding: 0 1rem;
    border-right: .5px solid #747474;
    border-bottom: .5px solid #747474;
    border-top: .5px solid #fff;
    border-left: .5px solid #fff;
    
}

.bandoneon-link{
    font-size:1.6rem;
    color:rgba(0,0,0,.7);
    text-decoration:none;
    background-color:#d4d4d4;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 1rem 0;
}

.bandoneon-link ion-icon{
    display:none      
    color:yellow; 
    padding:.5rem;
}

.bandoneon-link .remove{
     display:none; 
}

 .relleno{ 
    max-height: 0; 
    overflow:hidden;
    position:relative;
 
     background-color:#d4d4d4;
    transition:max-height 650ms;

} 

.relleno::before{
    content:"";
    position:absolute;
    width:.6rem;
    height:90%;
    background-color:rgba(114,179,118,.3);
    top:45%;
    left:0;
    transform:translateY(-50%);
    
}
.relleno p{
    color:rgba(0,0,0,.6);
    font-size: 1.4rem;
    padding:0 2rem 1rem 2rem; 
    line-height: 2rem;
}


.bandoneon-item:target .relleno{
    max-height:20rem;
}

.bandoneon-item:target .bandoneon-link .add{
    display:none;
}

.bandoneon-item:target .bandoneon-link .remove{
    display:block;
}
/* =============== end bandoneon ================

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.