James G James G - 3 months ago 15
CSS Question

How do I fix my Bootstrap accordion issue?

I've made an accordion for a website i'm building. Initially I built it with just html/css/js. It works perfectly. But when I add it to my bootstrap framework there are huge gaps in the accordion.

Here is my code before adding bootstrap:



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

button.accordion {
background-color: #eee;
color: black;
cursor: pointer;
padding: 18x;
width: 100%;
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: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}

div.panel.show {
opacity: 1;
max-height: 500px;
}

<html>
<head>
</head>
<body>
<h2>Studio Services</h2>

<button class="accordion"><h6>Studio Recording</h6></button>
<div class="panel">
<p>Catering to individual artists or small groups. Great for demos, single songs, or CD albums. Capable of digitally recording, editing and mastering tracks, as well as adding additional orchestration and/or accompaniment if preferred. Final product can be saved as a file, CD, or both.</p>
</div>

<button class="accordion"><h6>Digital Audio Editing</h6></button>
<div class="panel">
<p>Perfect for dance teachers, gymnastic and skating performances! Have a song that you need edited or remixed? Using the latest digital audio editing software, we can edit/remix your song that you provide on CD or digital format. We can also combine pieces of songs to form the perfect background track for your dance, gymnastic and skating routines.
Check out these three examples of smooth segues:
Segue1.mp3 Segue2.mp3 segue3.mp3</p>
</div>

<button class="accordion"><h6>Jingles</h6></button>
<div class="panel">
<p>Let us compose and record the perfect jingle, tailor made for YOUR business!
15, 30 and 60-second jingles to help bring in customers.</p>
</div>

<button class="accordion"><h6>Arranging, Transcription and Orchestration</h6></button>
<div class="panel">
<p>Ken has over 35 years experience in arranging choral music, from show choirs to church choirs, with the capability of adding orchestral charts and accompaniment as needed. He can also transcribe songs (making charts and accompaniment from a recorded piece.)</p>
</div>

<button class="accordion"><h6>Music Clean-up and Manuscripts</h6></button>
<div class="panel">
<p>Got a piece of hand-written music? We can transfer that to easy-to-read professional-quality manuscript.
Here’s an example of a before and after: Swingtime before and after.pdf</p>
</div>

<button class="accordion"><h6>Background Tracks</h6></button>
<div class="panel">
<p>Perfect for individualizing your own vocal performance, whether it be an inspirational church song or a memorable karaoke background track.</p>
</div>

<button class="accordion"><h6>Audition Accompaniment Tracks</h6></button>
<div class="panel">
<p>Great for mailed-in or digital audition CD’s. Let us work with you to give you the perfect accompaniment for that crucial vocal/instrumental audition. Don’t let your audition be ruined by a bad accompanist!</p>
</div>

<button class="accordion"><h6>Additional Digital Editing Capabilities</h6></button>
<div class="panel">
<p>Pitch adjustment, real time clip stretching, and countless editable digital effects</p>
</div>
</body>
</html>





This is what it looks like before bootstrap:

Before

After adding bootstrap:

After

Any help would be appreciated. Thank you.

Answer

You are using the same classes as bootstrap uses like panel and accordion. Also bootstrap resets margin and font for p and the h tags.

Change you class names and adjust margins to fix it. I have changed to _panel and _accordion for you below- go ahead and adjust your margins too. Cheers!

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");
  }
}
button._accordion {
    background-color: #eee;
    color: black;
    cursor: pointer;
    padding: 18x;
    width: 100%;
    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: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div._panel.show {
    opacity: 1;
    max-height: 500px;
}
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h2>Studio Services</h2>

<button class="_accordion"><h6>Studio Recording</h6></button>
<div class="_panel">
  <p>Catering to individual artists or small groups. Great for demos, single songs, or CD albums. Capable of digitally recording, editing and mastering tracks, as well as adding additional orchestration and/or accompaniment if preferred. Final product can be saved as a file, CD, or both.</p>
</div>

<button class="_accordion"><h6>Digital Audio Editing</h6></button>
<div class="_panel">
  <p>Perfect for dance teachers, gymnastic and skating performances! Have a song that you need edited or remixed? Using the latest digital audio editing software, we can edit/remix your song that you provide on CD or digital format. We can also combine pieces of songs to form the perfect background track for your dance, gymnastic and skating routines.
Check out these three examples of smooth segues:
Segue1.mp3     Segue2.mp3     segue3.mp3</p>
</div>

<button class="_accordion"><h6>Jingles</h6></button>
<div class="_panel">
  <p>Let us compose and record the perfect jingle, tailor made for YOUR business! 
15, 30 and 60-second jingles to help bring in customers.</p>
</div>

<button class="_accordion"><h6>Arranging, Transcription and Orchestration</h6></button>
<div class="_panel">
  <p>Ken has over 35 years experience in arranging choral music, from show choirs to church choirs, with the capability of adding orchestral charts and accompaniment as needed. He can also transcribe songs (making charts and accompaniment from a recorded piece.)</p>
</div>

<button class="_accordion"><h6>Music Clean-up and Manuscripts</h6></button>
<div class="_panel">
  <p>Got a piece of hand-written music? We can transfer that to easy-to-read professional-quality manuscript.
Here’s an example of a before and after:  Swingtime before and after.pdf</p>
</div>

<button class="_accordion"><h6>Background Tracks</h6></button>
<div class="_panel">
  <p>Perfect for individualizing your own vocal performance, whether it be an inspirational church song or a memorable karaoke background track.</p>
</div>

<button class="_accordion"><h6>Audition Accompaniment Tracks</h6></button>
<div class="_panel">
  <p>Great for mailed-in or digital audition CD’s. Let us work with you to give you the perfect accompaniment for that crucial vocal/instrumental audition. Don’t let your audition be ruined by a bad accompanist!</p>
</div>

<button class="_accordion"><h6>Additional Digital Editing Capabilities</h6></button>
<div class="_panel">
  <p>Pitch adjustment, real time clip stretching, and countless editable digital effects</p>
</div>
</body>
</html>