Grid With Multiple Show/hide Elements And Multiple Rows
I am creating a staff-list on a website I'm working on. I have to create a grid of 4 images in a row with 3 columns. Below each column, more info can expand from an 'expand' button
Solution 1:
I think the code could be improved without saving a toggled element.
$(document).ready(function() {
$(".toggle-button").on("click", function() {
var target = $(this).data("target");
if ($(this).hasClass("expand")) {
$(this).toggleClass("expand");
$(this).text('EXPAND');
$("#" + target).removeClass("active");
} else {
$(".toggle-button").removeClass("expand");
$(".toggle-button").text("EXPAND");
$(".hidden-content").removeClass("active");
$(this).toggleClass('expand');
$(this).text('COLLAPSE');
$("#" + target).toggleClass("active");
}
});
});
p {
margin: 0px;
padding: 0px;
}
.staff-wrap {
background-color: #f5f2f2;
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
transition: all 0.5s ease-out;
}
.staff-member {
flex-grow: 1;
max-width: 250px;
}
.staff-memberimg {
width: 100%;
}
#hidden-content-wrap {
visibility: hidden;
transition: all 0.5s ease-out;
width: 100%;
height: 0px;
background-color: #65665d;
}
.hidden-content {
height: 0px;
visibility: hidden;
transition: all 0.5s ease-in;
color: white;
background-color: #65665d;
text-align: center;
}
.active.hidden-content {
height: 100px;
visibility: visible;
transition: all 0.5s ease-in;
padding: 20px;
}
.toggle-button {
width: 100%;
background-color: #65665d;
color: white;
margin-top: -2px;
border: none;
padding: 20px;
margin-bottom: 0px;
}
.expand {
padding-bottom: 40px;
}
button {
display: inline-block;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="staff-wrap"><divclass="staff-member"><imgsrc="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" /><buttonclass="toggle-button item1"data-target="content1">EXPAND</button></div><divclass="staff-member"><imgsrc="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" /><buttonclass="toggle-button item2"data-target="content2">EXPAND</button></div><divclass="staff-member"><imgsrc="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" /><buttonclass="toggle-button item3"data-target="content3">EXPAND</button></div><divclass="staff-member"><imgsrc="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" /><buttonclass="toggle-button item4"data-target="content4">EXPAND</button></div></div><divid="content1"class="hidden-content"><p>"hidden content 1”</p></div><divid="content2"class="hidden-content"><p>"hidden content 2”</p></div><divid="content3"class="hidden-content"><p>"hidden content 3”</p></div><divid="content4"class="hidden-content"><p>"hidden content 4”</p></div>
Solution 2:
You should save the expanded element and update it on every click
try to set the variable var expandedEl = null;
and then change the toggleClass
to removeClass
and addClass
if(!$(this).hasClass('expand'))
{
if(expandedEl){
expandedEl.removeClass('expand');
expandedEl.text('EXPAND');
}
$(this).addClass('expand');
$(this).text('COLLAPSE');
expandedEl = $(this);
}
here is your example, but you need to work on it a bit more to hide the content on collapse:
Post a Comment for "Grid With Multiple Show/hide Elements And Multiple Rows"