How to horizontally center the buttons in a fixed sized div?

Thank you in advance. Any help will be greatly appreciated the main link is at Tryit Editor v3.3

<style>
button.accordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}

div.panel.show {
opacity: 1;
max-height: 500px; 
}
</style>

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>

Have you tried button.accordian {text-align: center;} if you want to centre the text on the buttons?

Hey WebMachine, i did try that and no luck

i also tried this

button.accordion {
   float: left;
   margin-right: 5px;
   display: inline-block;
}

the buttons align horizontally but once i clicked on the button it does change to a list mode :frowning:

Right. I forgot to add the display: inline-block along with the text-align: center;

How can i keep the content under the buttons ? test link

What do you mean?

The code below shows the buttons horizontally lineup but once i click on it then it change vertically and i don’t want that

<style>
button.accordion {
    cursor: pointer;
float: left;
margin-right: 5px;
display: inline-block;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

What is ‘it’? Do you mean the accordian effect? The only other thing I see that changes is a vertical scroll bar which appears when you have all three sections open.

yes the accordion effect.
What i like to have is to have the buttons horizontally lineup all the time

I just changed the javascript code to:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

WebMachine, I found and example of what i am trying to accoplish here is the link by using the code that i have only :slight_smile:

I’m not sure either about how you want it to work. But if you wrap it all in a div and give it a name, e.g. "id=“accordion” and add this to your css:


#accordion{
        position:relative;
}
div.panel {
        position:absolute;
}

Try this and tell if it displays like you want. Mind though that this is only to get to understand what you want, this code is not for use in a live setup.

Good finding, I was to early to step in then, sorry.

that is a good idea, we are advancing, but the buttons are gone :slight_smile:

<style>
.wrap {
  box-sizing: border-box;
  padding: 20px 0 0 10px;
  width 100%;
}
.container {
	width: 1200px;
	margin: 0 auto;
}
button.accordion {
    cursor: pointer;
float: left;
margin-right: 5px;
display: inline-block;
position:relative;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    position:absolute;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>
<div class="wrap">
<div class="container">
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Oh I see. You don’t really want an accordian effect. You want the three buttons to line up beside each other, and when one of the buttons is clicked, its content is displayed below the buttons.

So why don’t you start with a div containing the three buttons with display: inline-block. After that, have three divs, one containing each of the three text areas, with each set to display: none;. Then when you click on a button, have the display of the corresponding div change to display: block.

1 Like

This is not the same code you posted before, here the panel is covering the buttons.

Move the position:relative; to the .container and give the div.panel a top coordinate to move it down a bit.

Can’t you use something similar to what you found, it worked as you want, didn’t it?

Hi Erik, I am practicing my CSS skills and i want to learn how to modify the code. Here is what we have so far thanks to WebMachine.

<style>
.wrap {
  padding: 20px 0 0 10px;
  width 100%;
  display: inline-block;
}
.container {
	width: 1200px;
	margin: 0 auto;
	display: inline-block;
}
button.accordion {
    cursor: pointer;
float: left;
margin-right: 5px;
display: inline-block;
position:relative;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    position:absolute;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>
<div class="wrap">
<div class="container">
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Please continue practicing.

Check previous post, I’m AFK for at least twelve hours now.

Erik and WebMachine, i believe we got it working, Do you mind checking which code is extra or redoundand for me please ?

<style>
.wrap {
  padding: 0px 0 0 10px;
  width 100%;
  display: inline-block;
}
.container {
	width: 1200px;
	margin: 0 auto;
	display: inline-block;
}
button.accordion {
    cursor: pointer;
float: left;
margin-right: 5px;
display: inline-block;
position:relative;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    position:absolute;
    margin-top: 30px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>
<div class="wrap">
<div class="container">
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Section one Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Section two Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Section three Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}
</script>

I did some identation:

<style>
.wrap {
  padding: 0px 0 0 10px;
  width 100%;
  display: inline-block;
}
.inner_container {
	width: 1200px;
	margin: 0 auto;
	display: inline-block;
}
button.accordion {
    cursor: pointer;
	float: left;
	margin-right: 5px;
	display: inline-block;
	position:relative;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    position:absolute;
    margin-top: 30px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>
<div class="wrap">
	<div class="inner_container">
	
		<button class="accordion">Section 1</button>
	<div class="panel">
  		<p>Section one Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
	</div>

		<button class="accordion">Section 2</button>
	<div class="panel">
  		<p>Section two Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
	</div>

		<button class="accordion">Section 3</button>
	<div id="foo" class="panel">
  		<p>Section three Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun.</p>
	</div>

	</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Divs by default are block level elements. I don’t really think you need to set .wrap and .inner_container to display: inline-block.