How do I get my dropdown div positioned in the correct position?
Mel
When I click on my divs, I want them all to be in the same position, i.e. to the right and below the div content, but they are in the same position as the div I clicked on, as if they were all on top of each other A small box, if that makes sense. I'm not entirely sure how to get them all to move to the right and stay there.
https://jsfiddle.net/frmLuvzn/2/
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="content">
<div class="description">
The First Album[1989]
</div>
</div>
<div class="about-section">
<p class="album">The First Album[1989]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- <img class="card-img-top" src="images/album1.jpg"> -->
</div>
<div class="content">
<div class="description">
The Second Album[1990]
</div>
</div>
<div class="about-section">
<p class="album">The Second Album[1990]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-5 mb-4 shadow-sm">
</div>
<div class="content">
<div class="description">The Third Album[1990]</div>
</div>
<div class="about-section">
<p class="album">The Third Album[1990]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
$(function() {
$('.description').click(function() {
$(this).closest('.content').siblings('.about-section').toggle(1000);
})
})
hybrid
You are more suitable to use flexbox
. Here is an example:
$(function() {
$('.description').click(function() {
$(this).closest('.content').siblings('.about-section').toggle(1000);
})
})
.about-section{
display:none;
}
.wrapper {
display: flex;
}
.wrapper > div {
flex: 0 0 33.33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- <img class="card-img-top" src="images/album2.jpeg"> -->
<div class="content">
<div class="description">
The First Album[1989]
</div>
</div>
<div class="about-section">
<!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
<p class="album">The First Album[1989]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- <img class="card-img-top" src="images/album1.jpg"> -->
</div>
<div class="content">
<div class="description">
The Second Album[1990]
</div>
</div>
<div class="about-section">
<!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
<p class="album">The Second Album[1990]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-5 mb-4 shadow-sm">
<!-- <img class="card-img-top" src="images/town.jpg"> -->
</div>
<div class="content">
<div class="description">The Third Album[1990]</div>
</div>
<div class="about-section">
<!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
<p class="album">The Third Album[1990]</p>
<p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
<div id="albumlist">
<p>Tracklist </p>
<ol class="albumlist">
<li>Yes</li>
<li>No</li>
<li>Idk</li>
<li>Can you repeat the question?</li>
</ol>
</div>
</div>
</div>
</div>