I have different divs, I want to click on a div and expand its content, and if I click again it should hide that content, that is working fine, but I have different divs, and I want only one div expanded at the same time, how should I reach this?
This it's not good, do you see at this time I can have several divs expanded, how can I make sure that this won't happen?:
This is what I want to reach:
JQuery function, how can I collapse any other expanded div when I click in a new one?:
$(".contact_item .head").click(function () {
if ($(this).parent('div').hasClass('expanded')) {
$(this).next('div').slideUp();
$(this).parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
Html code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style>
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415) 639-3001
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
123 Fake st , Springfield, 12345, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
555
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215) 279-5845
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(832) 586-0301
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
UPDATE: This is the CSS
.contact_item {
width: 100%;
border: 1px solid #f1e7e0;
background-color: #fcf6f5;
margin: 3px 0px;
float: left;
&.expanded {
.head .name {
color: #f60;
}
.head .name span {
border-color: #f60;
color: #f60;
&.plus {
display: none;
}
&.minus {
display: block;
}
}
}
.head {
.name {
font-family: "Tahoma";
color: rgb(100, 100, 100);
font-size: 11.1px;
text-transform: uppercase;
padding: 7px 15px;
cursor: pointer;
position: relative;
span {
position: absolute;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #706f6f;
text-align: center;
right: 15px;
top: 7px;
font-size: 18px;
line-height: 17px;
&.minus {
display: none;
}
}
}
}
}
I've changed a little bit my JQuery function and now it allows just one div expanded, but I have to click twice to expand a div, the first time it closes any other expanded div but doesn't open the one that I clicked on, and the second time then is opened:
$(".contact_item .head").click(function () {
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
I tried to implement your requirement:
https://jsfiddle.net/pje7Lznf/
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style>
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415) 639-3001
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
123 Fake st , Springfield, 12345, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
555
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215) 279-5845
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(832) 586-0301
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
$(".contact_item .head").click(function () {
if ($(this).parent('div').hasClass('expanded')) {
$(this).next('div').slideUp();
$(this).parent('div').removeClass('expanded');
$(".info").each(function(i , obj){
console.log($(obj))
$(obj).removeClass('expanded');
$(obj).slideUp();
})
} else {
$(".info").each(function(i , obj){
console.log($(obj))
$(obj).removeClass('expanded');
$(obj).slideUp();
})
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
.contact_item{
background-color: #bdc3c7;
color: white;
margin-bottom: 10px
}
I put together a fiddle with a simple CSS-based solution that allows the jQuery code to be boiled down to something like this:
$('.contact_item').on('click', '.head', function () {
var clicked = $(this).closest('.contact_item');
$('.contact_item.expanded').add(clicked).toggleClass('expanded');
});
The solution does away with animations, but it's how I've been handling a lot of these types of situations and it is super clean comparatively. It should be a fairly simple exercise from here to add the animations back in if necessary, but consider this solution as a nice alternative:
Fiddle w/ solution
Those were nice suggestions but didn't work completely, finally this is what I did with my function and now it works:
$(".contact_item .head").click(function () {
var flag = $(this).parent('div').hasClass('expanded');
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
if (flag==false) {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
}
else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
Related
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.
My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help
I have a grid of thumbnails. It's coded in <ul> as a wrapper and <li> for displaying each thumbnails. I have set the following CSS to the <li> tag:
float: none;
display: inline-block !important;
The thumbnails are displaying in a Grid. I have also used Bootstrap classes in <li class="col-xs-12 col-sm-6 col-md-3 col-lg-3">. As per assigned classes it should display 4 thumbnails per row. But currently it's displaying only 3 thumbnails per row. I searched and found that it's because <li>s are given display: inline-block and there are line break in HTML after each <li> in the HTML file. Please let me know how to display 4 thumbnails per row using display: inline-block.
Also if I set the float: left for <li> then I should give height for each <li>. But the images within those <li>s are of different size.
The problems are:
I want to display 4 columns per row (now only 3 are displaying)
I want to set the border-right to cover whole height of the grid row. (Now since height of the <li> is according to the height of the thumbnail, the border-right is spanning till half the row for smaller thumbnails.)
Please help me with this.
body {
background-color: #ddd;
}
.list-unstyled {
background-color: #eee;
width: 100%;
}
.list-unstyled li{
background-color: #eee;
float: none;
display: inline-block !important;
/*display: -moz-grid !important;*/
padding: 10px;
margin: 0;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
box-sizing: border-box;
}
.list-unstyled li img{
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<ul class="list-unstyled">
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/A-HAPPY-SUNDAY.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/12/cover17.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/09/cover1.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Bolne-Wali-Ghadi.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover14.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2016/01/cover.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Chhoti-Chinti-ki-Badi-Dawat.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover13.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Fu-ku.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover8.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Just remove display: inline-block !important; from .list-unstyled li and give display: flex; flex-wrap: wrap; to .list-unstyled will make it as your expected result.
.list-unstyled {
background-color: #eee;
width: 100%;
display: flex;
flex-wrap: wrap;
}
Working Fiddle
Edit:
Give display: flex; align-items: flex-end; to .list-unstyled li
Updated Fiddle
Try getting rid of float: none; in .list-unstyled li
So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.
This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!
I'm trying to make a slider with jQuery Cycle where, when you click on one of 5 thumbnails, you switch to the right slide in the slider. Those thumbs are external to the slider.
Thing is, for some reason, the startingSlide argument doesn't work and just doing .cycle(number) doesn't either, even if the slider is clearly running. Here's a peek at the code:
JS
jQuery(document).ready(function(){
var current_slide;
jQuery('#slider_accueil').cycle({
fx: 'fade',
timeout: 3000,
after: onAfter,
startingSlide: 0,
pager: '#nav',
next: '.next_btn_slider',
prev: '.prev_btn_slider'
});
function onAfter(curr,next,opts){
jQuery('.indicator').removeClass('current')
current_slide=opts.currSlide + 1
jQuery('#thumb'+current_slide+' .indicator').addClass('current')
}
jQuery('#thumb1').click(function(){
jQuery('#slider_accueil').cycle(0);
return false;
})
jQuery('#thumb2').click(function(){
jQuery('#slider_accueil').cycle(1);
return false;
})
jQuery('#thumb3').click(function(){
jQuery('#slider_accueil').cycle(2);
return false;
})
jQuery('#thumb4').click(function(){
jQuery('#slider_accueil').cycle(3);
return false;
})
jQuery('#thumb5').click(function(){
jQuery('#slider_accueil').cycle(4);
return false;
})
})
html
<div id="sliderAccueil">
<div id="nav" style="display:none;"></div>
<img src="/wp-content/themes/customtheme/images/slider_previous.png" class="prev_btn_slider">
<img src="/wp-content/themes/customtheme/images/slider_next.png" class="next_btn_slider">
<div id="slider_accueil" style="position: relative;">
<div style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0; display: none;">
<img src="/wp-content/uploads/2011/09/slider1.jpg">
<div>
<div class="maintext">
<h2>Slide 1</h2>
<p>Slide 1</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><ig src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 4; display: none; opacity: 0;">
<ig src="/wp-content/uploads/2011/09/slider2.jpg">
<div>
<div class="maintext">
<h2>Slide 2</h2>
<p>Slide 2</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block; opacity: 0.942616;">
<img src="/wp-content/uploads/2011/09/slider3.jpg">
<div>
<div class="maintext">
<h2>Reprise des travaux majeurs</h2>
<p>Slide 3</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2; display: block; opacity: 0.0573843;">
<img src="/wp-content/uploads/2011/09/slider4.jpg">
<div>
<div class="maintext">
<h2>Slide 4</h2>
<p>Slide 4</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; opacity: 0;">
<img src="/wp-content/uploads/2011/09/slider5.jpg">
<div>
<div class="maintext">
<h2>Slide 5</h2>
<p>Slide 5</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
</div>
<div id="thumbnails_slider_accueil">
<ul>
<li>
<b id="thumb1" href="#1">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb1.png)" class="thumbnail">
<p>Voies retranchées trains ajoutés</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb2" href="#2">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb2.jpg)" class="thumbnail">
<p>Événements</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb3" href="#3">
<div class="indicator current"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb3.jpg)" class="thumbnail">
<p></p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb4" href="#4">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb4.jpg)" class="thumbnail">
<p>Appels d'offres</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb5" href="#5">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb5.jpg)" class="thumbnail">
<p>Environnement</p>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
^check source, seems I cant put that cleaner than this.
Anybody have an idea?
PS, It's on purpose that all img are ig and all links are ... Stackoverflow wouldn't let me post.
I found the answer to my own question...
Seems that to use jQuery('#slider_accueil').cycle(0); you need to have the full version linked, and not the lite.
Seems like that function is one of those who have been taken out from the conversion from full to lite... Note to self: The lite versions may not have the function you want to do... just spent 2 hours trying all kinds of stuff on that. :p