My custom accordion layout for the features needed in the site I am building is not working well with Jquery. How can I modify it to collapse properly? Specifically, I want it so that when I open number 2, number 1 will automatically close.
I've tried using the common jquery methods found online, but they don't seem to be effective. I've been staring at my screen with a puzzled look for an hour now.
<div id="accordion">
<div className="GreyCircle top" />
<div className="Item" >
<div className="DestinationMarkerGreen active" >1</div>
<div className="square" />
<div className="Content" >
<div className="card">
<div className="card-header" id="heading1" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
<h4>Bristol</h4>
<p>England, United Kingdom</p>
</div>
<div id="collapse1" className="collapse show in accordionItem" aria-labelledby="heading1" data-parent="#accordion">
<div className="card-body">
Include your code here.
</div>
</div>
</div>
</div>
</div>
<div className="Item" >
<div className="DestinationMarkerGreen" >2</div>
<div className="square" />
<div className="Content" >
<div className="card">
<div className="card-header" id="heading2" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
<h4>Bristol</h4>
<p>England, United Kingdom</p>
</div>
<div id="collapse2" className="collapse accordionItem" aria-labelledby="heading2" data-parent="#accordion">
<div className="card-body">
Include your code here.
</div>
</div>
</div>
</div>
</div>
<div className="Item" >
<div className="DestinationMarkerGreen" >3</div>
<div className="square" />
<div className="Content" >
<div className="card">
<div className="card-header" id="heading3" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
<h4>Bristol</h4>
<p>England, United Kingdom</p>
</div>
<div id="collapse3" className="collapse show accordionItem" aria-labelledby="heading3" data-parent="#accordion">
<div className="card-body">
Include your code here.
</div>
</div>
</div>
</div>
</div>
Here is what the image should look like