I've designed a grid with separate boxes that reveal related content when clicked. The display of this content is achieved using jQuery's slideToggle feature.
The setup functions smoothly, with each row containing clickable boxes that unveil their respective content below them:
https://i.sstatic.net/ULLtz.jpg
// JavaScript code snippet
$(document).ready(function() {
$('.info-content-box').hide();
var openedId = '';
$('.info-box .info-header').click(function(e) {
var id = '#' + $(this).data('name');
if (openedId ==='') {
$(id).slideToggle(400, function() {
openedId = id;
});
} else {
if (openedId == id) {
$(openedId).slideToggle(400, null);
} else {
$(openedId).hide(10);
$(id).fadeToggle(400, function() {
openedId = id;
});
}
}
})
})/* CSS styles */
.info-box {
text-align: center;
height: 200px;
color: white;
}
.info-box .info-header {
background-color: #3178b9;
height: 90%;
border: 1px solid #f5f0e7;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all 150ms ease-out;
-moz-transition: all 150ms ease-out;
-o-transition: all 150ms ease-out;
transition: all 150ms ease-out;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89b869b869f">[email protected]</a>" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1829f829f86">[email protected]</a>" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="padding-top:50px;">
<div class="row">
...
</div>However, I aim to make my code snippet responsive so that the content box appears directly beneath its corresponding box in mobile view. Currently, due to placing the content divs in a row below the box rows, the content displays at the end of all the boxes.
If anyone could assist me in achieving this effect, it would be greatly appreciated.
The code can be accessed on Plunker here: Plunkr
My goal is similar to the functionality found on this webpage: Example Link
On that site, the opened content shifts other boxes downward and operates seamlessly even on smaller screens.
Edit:
In response to user StefanBob's suggestion, I have updated my JavaScript as shown below:
$(document).ready(function() {
$('.info-content-box').hide();
var openedId = '';
$('.info-box .info-header').click(function(e) {
var id = '#' + $(this).data('name');
if (openedId === '') {
if ($(window).width() < 992) {
$(id).insertAfter($(this).parent());
$(id).slideToggle(400, function() {
openedId = id;
});
} else {
$(id).slideToggle(400, function() {
openedId = id;
});
}
} else {
if (openedId == id) {
if ($(window).width() < 992) {
$(id).insertAfter($(this).parent());
$(openedId).slideToggle(400, null);
} else {
$(openedId).slideToggle(400, null);
}
} else {
$(openedId).hide(10);
if ($(window).width() < 992) {
$(id).insertAfter($(this).parent());
$(id).fadeToggle(400, function() {
openedId = id;
});
} else {
$(id).fadeToggle(400, function() {
openedId = id;
});
}
}
}
})
})
This solution checks the window width to determine whether content should be inserted after the parent box or simply toggled. While functional, I am open to suggestions for a more elegant implementation of this behavior rather than what seems like a workaround.