Here are simple examples of drop-down blocks: Example 1 Example 2

Can you please tell me how to fix the width of the drop-down block?

var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } 
 button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 20%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; background-color: #444; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; max-width: 50%; } 
 <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>

  • Add HTML code to chtoli ... - MihailPw
  • AGS17 So by reference "Example 1" and "Example 2" everything is there. - Andrew F.
  • Added code here. - Andrew F.
  • at least see what you insert ... HTML and JS from one example, CSS from another ... - MihailPw
  • 2
    @AndrewF. What is the question? What does it mean to fix? Set a fixed width , so that will be a width of "fixed." - Vadim Ovchinnikov

2 answers 2

Here is the first way to change the html framework. And adding 100% width to the button and drop-down menu.

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } 
 .menu_container{ width: 200px; } button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; box-sizing: border-box; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { width: 100%; padding: 0 18px; background-color: #444; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; box-sizing: border-box; } 
 <div class="menu_container"> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div>

And this option with the help of ՝ javascript ՝ when opening we set the width of the drop-down menu to the width of the button .

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; panel.style.width = this.offsetWidth+"px"; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } 
 button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 40%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; box-sizing:border-box; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; background-color: #444; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; box-sizing:border-box; } 
 <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>

    The height property, specified in % , works only if the height for the external block is specified. The CSS 2.1 standard provides a workaround for this problem, separately indicating that percentages work at position:absolute . In practice, it often helps out. If the parent element does not have height , but indicates min-height , then in order for the child block to occupy 100% of the height, the parent must set the height: 1px property height: 1px .