CODEWITHSUNDEEP
htmlcssbutton
Galaxy Master88
Galaxy Master88

Reputation: 11

2 buttons on the same line

I just cant get them on the same line, anyone know what I can do? I'm trying to put both buttons on the top line and both expand under them I've looked at a couple other posts about this (display:inline-block;, etc, might have put them in thr wrong spot though) but I cant seem to get any of it working

this is the code:

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";
    }
  });
}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 40%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.button {
  display: inline;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  width: 37%;
}
<button class="collapsible">button</button>
<div class="content">
  <p>text</p>
</div>

<button class="collapsible">button</button>
<div class="content">
  <p>text</p>
</div>

Upvotes: 0

Views: 2927

Answers (2)

TommyJ
TommyJ

Reputation: 51

I'd suggest getting familiar with Flexbox. Based on what you're trying to achieve with your layout of buttons next to each other and corresponding text underneath the associated button, you'd be much better off thinking in terms of containers and items that go into those containers rather than trying to write specific CSS rules for every element. Your brain will thank you when it hurts less.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  width: 37%;
}

.button-container {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
}
<div class="button-container">
  <div class="item">
    <button class="collapsible">button</button>
    <div class="content">
      <p>text</p>
    </div>
  </div>

  <div class="item">
    <button class="collapsible">button</button>
    <div class="content">
      <p>text</p>
    </div>
  </div>
</div>

Right now, those buttons are right up next to each other but I think you'll be able to take it from here.

I'm including a link to JSFiddle with this working. It also includes your JavaScript so you can see the collapse effect. https://jsfiddle.net/ods0j65t/

Upvotes: 1

QuantumX
QuantumX

Reputation: 172

Put your HTML code in another div,

<div class="container">

 <button class="collapsible">button</button>
 <div class="content">
  <p>text</p>
 </div>

 <button class="collapsible">button</button>
 <div class="content">
  <p>text</p>
 </div>

</div>

and add in CSS

.container {
 display: flex;
}

Upvotes: 0

Related Questions