Toogle button, with html action

Navigation
1

I'm developing a website, and I would like to create a "Show More" button when clicked it will show a text, but the list that will be down will go down, as exemplified in the image, which is the simplest and most practical method to do ?

    
asked by anonymous 08.01.2018 / 20:26

1 answer

1

I made this template with CSS only, it's very simple, but it's just for teaching purposes and for you to better understand the technique.

Here is a label with a for for input checkbox which when :checked will show the content. Except that input is hidden and label plays the role of the button. See the Snippet for a better understanding. 

.wrapper {
    padding: 8px 24px 24px;
    border: 1px solid black;
    display: inline-block;
    float:left;
    margin: 16px;
}
a, label {
    color: orangered;
    cursor: pointer;
}
.hide {
    display:none;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked ~ .hide {
    display: block
}
input[type="checkbox"]:not(:checked) ~ .hide {
    display: none
}
<div class="wrapper">
    <h3>Título</h3>
    <input type="checkbox" id="btn-a">
    <label for="btn-a">Mostrar Mais</label>
    <div class="hide">
    <h4>Aqui meu conteúdo.</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, asperiores?
    </div>
</div>
<br clear="all">
<div class="wrapper">
    <h3>Título</h3>
    <input type="checkbox" id="btn-b">
    <label for="btn-b">Mostrar Mais</label>
    <div class="hide">
    <h4>Aqui meu conteúdo.</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, asperiores?
    </div>
</div>

If you need it in JavaScript I'll give you a template, but I find it unnecessary ...

    
08.01.2018 / 23:59
Annotation @Version Ajax taking only the first id