Search code examples
bootstrap-4bootstrap-accordion

Bootstrap 4 Accordion not auto closing previously open sections


I'm trying to teach myself some Bootstrap 4 and just the basics of building a website. I've been trying to make this Accordion menu function properly and just can't seem to get it working correctly. From what I've been able to find the most common errors result from either loading jquery after the Bootstrap CDN or not referencing the data-parent attribute properly with the # sign. So far I haven't been able to pinpoint my mistake.

What could I do to make this work properly?

Here's my code without my CSS below:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset ="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="cabinAccStyle.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	</head>

	<body>
		
		<div class="container">
			<div class="jumbotron">
				<img src="cabinLakePanoramic.jpg" style="width:90%;" class=img-responsive">
			</div>
			<div id="Accordion" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
					<!--Collapsible section for Lakeside Family Cabins-->
						<div class="panel-heading" role="tab" id="lakesideHeading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#Accordion" href="#lakesideCollapse" aria-expanded="false" aria-controls="lakesideCollapse">
								<span class="fas fa-angle-right"></span>	Lakeside Family Cabin
								</a>
							</h4>
						</div>
						<div id="lakesideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="lakesideHeading">
							Lakeside Family Cabins are designed to sleep a maximum of  6 people comfortably all on one level.   They are situated along our 7 acre private fishing lake.  You can fish, play and cook out just feet from the water. 	
						
						<br><br>
						<!--Lakeside Cabin Booking Calendar-->
							<iframe id="bookingcalendar" src="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D" style="width: 100%; max-width: 800px; height: 400px; border: 0; padding: 0; margin: 0;" frameborder="0">
<a href="
https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&productfilter=36270&embedded=y&search=0&avgrid=y&color=000000&bgcolor=EFFF0A&bcolor=FF050D">Make Reservation</a></iframe>
						</div>
					</div>
					<!--Collabsible section for 3 Room cabins-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="threeRoomHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#threeRoomCollapse" aria-expanded="false" aria-controls="threeRoomCollapse">
								<span class="fas fa-angle-right"></span>	Lakeside Three Room Cabin
								</a>
							</h4>
						</div>
						<div id="threeRoomCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="threeRoomHeading">
							3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
						</div>
					</div>
					<!--Collapsible section for Poolside Family Cabins-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="poolsideHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#poolsideCollapse" aria-expanded="false" aria-controls="poolsideCollapse">
								<span class="fas fa-angle-right"></span>	Poolside Family Cabin
								</a>
							</h4>
						</div>
						<div id="poolsideCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="poolsideCollapse">
							Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
						</div>
					</div>
					<!--Collabsible section for Motel Rooms-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="motelHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#motelCollapse" aria-expanded="false" aria-controls="motelCollapse">
								<span class="fas fa-angle-right"></span>	Motel Room
								</a>
							</h4>
						</div>
						<div id="motelCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="motelHeading">
							Motel Rooms contain 2 queen beds and can accommodate up to 4 guests.  Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.	
						</div>
					</div>
					<!--Collabsible Section for Suites-->
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="suiteHeading">
							<h4 class="panel-title">
								<a class="collapsed" data-toggle="collapse" data-parent="#Accordion" href="#suiteCollapse" aria-expanded="false" aria-controls="suiteCollapse">
								<span class="fas fa-angle-right"></span>	Suites
								</a>
							</h4>
						</div>
						<div id="suiteCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="suiteHeading">
							Cabin suites have multiple cabin or motel units built together to accommodate larger groups.
						</div>
					</div>
			</div>
		</div>
		
		
	
	
		<script>					
	//When opening panel remove chevron-right, add chevron down
		$('#Accordion .panel-collapse').on('shown.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-right").addClass("fa-angle-down");
									});

	//When closing panel remove chevron-down, add chevron right

	$('#Accordion .panel-collapse').on('hidden.bs.collapse', function () {$(this).prev().find(".fas").removeClass("fa-angle-down").addClass("fa-angle-right");
									});
         
		</script>
	</body>









</html>


Solution

  • You are using Bootstrap 3's accordion in your example above. Since you are using Bootstrap 4 JS and CSS this will create some errors.

    Here is the documentation for 4.2.1: https://getbootstrap.com/docs/4.2/components/collapse/#accordion-example

    Try:

    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h2>
        </div>
    
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </button>
          </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </button>
          </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>