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

mp5163093 · December 12, 2016, 7:14pm

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>

WebMachine · December 12, 2016, 7:39pm

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

mp5163093 · December 12, 2016, 7:49pm

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

WebMachine · December 12, 2016, 7:51pm

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

mp5163093 · December 12, 2016, 7:58pm

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

WebMachine · December 12, 2016, 9:34pm

What do you mean?

mp5163093 · December 12, 2016, 9:39pm

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>

WebMachine · December 12, 2016, 9:53pm

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.

mp5163093 · December 12, 2016, 10:04pm

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");
  }
}

mp5163093 · December 12, 2016, 10:20pm

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

Erik_J · December 12, 2016, 10:25pm

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.

Erik_J · December 12, 2016, 10:28pm

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

mp5163093 · December 12, 2016, 10:29pm

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

<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>

WebMachine · December 12, 2016, 10:30pm

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.

Erik_J · December 12, 2016, 10:48pm

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?

mp5163093 · December 12, 2016, 11:04pm

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>

Erik_J · December 12, 2016, 11:10pm

Please continue practicing.

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

mp5163093 · December 12, 2016, 11:12pm

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>

mp5163093 · December 12, 2016, 11:27pm

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>

WebMachine · December 13, 2016, 12:54am

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