Expand <div> and call other content asynchronously

Asked

Viewed 127 times

1

I would like to know how to create an event click on <div> that upon receiving the event it expanded to a percentage of the screen.

Ex: 6 <div>, blog, who we are, etc... When I click "Who we are", it expands with a different CSS, texts, etc... I think it’s asynchronous, but I couldn’t do it.

NOTE: I would like to do with Transition effects.

javascript html jquery css
  • 1

    try it jQuery Animate

  • Dear your question this kind of confusing, what percentage of screen? Do you want the candy to expand in what way? Edit the question with a screenshot of the layout you want or the code you already have

  • Type like this man https://codepen.io/RobotsPlay/pen/Lniyd

1 answer

0

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 its current state.

I’ll leave as an example a simple code, but if you want something more elaborate 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>

  • Thanks man... I wanted something in this model >> https://codepen.io/RobotsPlay/pen/Lniyd << Saka?? Help me?

  • I get it, but then you already have the code of what you want to do, just analyze and understand what it does, and then reproduce it the way you want. It is good to understand instead of copy and paste, it is the tip I give, because then you can apply this knowledge in something else.

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.