Button to open/close content

Question

Hello guys I’m new here and also with programming... well I have several div with different contents and are with hidden, I would like that when you click a button continue reading it closes and display the content of certain div and the other Ivs remains hidden and a button also close content as in the images.. I am having a certain difficulty making it work in all the blocks needed it to be more dynamic.. Thank you from now on

Answer 1

From what I understand you want to create a "Read more", I believe you will have to implement a little JS in your solution, a basic solution is the following:

THE HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p>
<div id="more" style="display:none;">
    <p>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
    <img..../>
</div>
<a href="javascript:showMore()" id="link">Read More >></a>`

THE JS

function showMore(){
    //remove o link
    document.getElementById('link').parentElement.removeChild('link');
    //Mostra o conteúdo #more
    document.getElementById('more').style.display = "block";
}

There are also some ready-made JS libraries: https://github.com/jedfoster/Readmore.js

Answer 2

ex: https://plnkr.co/edit/lHh7KVQBrGzMFFbre5z1?p=preview

Add the Divs you want to show the same class..

 <div class="to_show">

then you can use jquery to add a listenner to the button and use the toggle function.

$(document).ready(function() {

    $("#buttonclick").click(function() {
            $(".to_show").toggle();
    });
});