Expand div and call other content asynchronously [closed]

Question

Expand div and call other content asynchronously [closed]

Navigation

#1 by (0 votes)

1

I would like to know how I can create an event by clicking on a <div> which upon receiving the event it expands to a percentage of the screen.

When I click on "Who we are", it expands with different CSS, texts, etc ... I believe it is asynchronous, but I could not do it .

NOTE: I would like to do with transition effects.

javascript html jquery css

asked by anonymous 16.04.2018 / 02:21

1 answer

Uncaught TypeError: $ (...) .validate is not a function Overlap text in an image with flex box

score 0 · Answer 1

You can even do asynchronous, but most of the time it's not necessary.

Usually this is done by leaving a div hidden that by clicking on the div that has the title you show or hide it, depending on the current state of it.

I'll leave a simple code as an example, but if you want something more detailed feel free to improve it.

<div id="meuId">
    <h1>Seu título</h1>
    <div style="display:none;">
        Sua descrição aqui.
        Você pode usar html e css normalmente.
    </div>
</div>

<script>
    // para fazer o conteúdo aparecer e sumir
    $("#meuId h1").click(function(){

        if ($("#meuId div").is(":visible"))
            $("#meuId div").slideUp(500); // fecha a div de baixo pra cima
        else
            $("#meuId div").slideDown(500); // abre a div de cima para baixo

    });
</script>