Collapse pushing the Div

Asked

Viewed 171 times

0

I created a Collapse but I’m not getting it to push the Divs down, thus getting superimposed on the content.

I tried some code in CSS but it’s not working.

HTML:

<div id="collapsible-menu">
 <button type="button" class="collapsible"><img src="/img/header/earth-grid-symbol.png" alt="Menu Linguagem"></button>
  <div class="content">
    <img src="img/header/earth.png">
    <img src="img/header/br.png">
   </div>

JAVASCRIPT:

var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

CSS:

        display: flex;
        flex-direction: column;
        border: 2px solid #f0db00;
    }

    button.collapsible {
        cursor: pointer;
        border: none;
        text-align: left;
        outline: none;
        background-color: transparent;
    }

    .content{
        border: 2px solid #f0db00;
        margin-left: -250px;
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
javascript html css collapse

  • mount a verifiable example that shows the problem, only looked at the code becomes difficult to understand

  • In the test it works. However if you look at the test page it does not give space in the div.

  • https://jsfiddle.net/renanranzani/a6dkcpu0/21/ -Test http://www.siteesquadros.kinghost.net/ - Page

  • try for example here on the site, it supports scripts the way jsfiddle does

1 answer

0

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
div#collapsible-menu{
        display: flex;
        flex-direction: column;
        border: 2px solid #f0db00;
    }

    button.collapsible {
        cursor: pointer;
        border: none;
        text-align: left;
        outline: none;
        background-color: transparent;
    }

    .content{
        border: 2px solid #f0db00;
        margin-left: -250px;
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    
    div.banner-up{
        /*border: 4px solid #000045;*/
        height: 150px;
        width: 100%;

        display: flex;
        align-items: center;
        flex-direction: column;
        line-height: 150px;

        background-color: #000045 ;
        border-bottom: 4px solid #f0db00;
    }

    div.banner-up h1{
        color: #fff;
    }
 
                                <div id="collapsible-menu">
                                <button type="button" class="collapsible"><img src="/img/header/earth-grid-symbol.png" alt="Menu Linguagem"></button>
                                    <div class="content">
                                     <img src="img/header/br.png" alt="Lingua Portuguesa">
                                     <img src="img/header/earth.png" alt="Linguas Internacionais - Inglês e Espanhol">
                                    </div>
                              </div>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

      <div class="banner-up">
            <h1>Perfiladeira de Telhas</h1>
      </div>

      <div class="container">
            <div class="container-img">
                <img src="img/perfiladeira-de-telhas/perfiladeiras-de-telhas-metalicas.png" alt="Perfiladeira de Telha Metálica">
            </div>

Browser other questions tagged javascript html css collapse

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