Toggle 4 divs and display them in full width of the screen
Question
I have this page that contains 4 columns that are 25% width and 100% height each and 4 buttons to toggle each one of them. The problem is that I can't figure out a way to make them resize accordingly.
When 4 columns are visible each should be 25% wide When 3 columns are visible each should be 33% wide and so on ... But when I toggle the hidden ones to be visible again they need to adjust accordingly, any suggestions ?
I created a snippet for my issue.
$("#button-column-1").click(function() { $("#column-1").toggle(1500); }); $("#button-column-2").click(function() { $("#column-2").toggle(1500); }); $("#button-column-3").click(function() { $("#column-3").toggle(1500); }); $("#button-column-4").click(function() { $("#column-4").toggle(1500); });
.column { float: left; height: 100vh; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px black; -moz-box-shadow:inset 0px 0px 0px 1px black; box-shadow:inset 0px 0px 0px 1px black; }
<html> <head> </head> <body> <div id="button-container"> <button type="button" id="button-column-1">Column 1</button> <button type="button" id="button-column-2">Column 2</button> <button type="button" id="button-column-3">Column 3</button> <button type="button" id="button-column-4">Column 4</button> </div> <div class="column" id="column-1"> 1 </div> <div class="column" id="column-2"> 2 </div> <div class="column" id="column-3"> 3 </div> <div class="column" id="column-4"> 4 </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
2 answers
solution1
3 2016-12-13 11:47:12
Use of flexbox goes perfectly with your layout. Wrap your columns in a block element, I used a section, and then add the following CSS:
/* This is the element that contains the columns */
#setB {
display:flex;
flex-wrap:nowrap;
justify-content: center;
}
/* This ruleset will make the columns stretch and shrink when there's empty or less space. They will start adjusting when they are 24% or more in width.
.column {
flex: 1 1 24%;
...
SNIPPET
$("#btn1").click(function() { $("#col1").toggle(1500); }); $("#btn2").click(function() { $("#col2").toggle(1500); }); $("#btn3").click(function() { $("#col3").toggle(1500); }); $("#btn4").click(function() { $("#col4").toggle(1500); });
#setB { display: flex; flex-wrap: nowrap; justify-content: center; } .column { flex: 1 1 24%; height: 100vh; width: 25%; -webkit-box-shadow: inset 0px 0px 0px 1px black; -moz-box-shadow: inset 0px 0px 0px 1px black; box-shadow: inset 0px 0px 0px 1px black; }
<html> <head></head> <body> <fieldset id="setA"> <button id="btn1">Column 1</button> <button id="btn2">Column 2</button> <button id="btn3">Column 3</button> <button id="btn4">Column 4</button> </fieldset> <section id='setB'> <div class="column" id="col1"> 1 </div> <div class="column" id="col2"> 2 </div> <div class="column" id="col3"> 3 </div> <div class="column" id="col4"> 4 </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
solution2
1 2016-12-13 11:53:16
change css width after toggling
https://jsfiddle.net/zprLtoj8/
$("#button-column-1").click(function() {
$("#column-1").toggle(1500, function() {
columnCalc();
});
});
$("#button-column-2").click(function() {
$("#column-2").toggle(1500, function() {
columnCalc();
});
});
$("#button-column-3").click(function() {
$("#column-3").toggle(1500, function() {
columnCalc();
});
});
$("#button-column-4").click(function() {
$("#column-4").toggle(1500, function() {
columnCalc();
});
});
function columnCalc () {
$(".column").css('width', 100/$(".column:visible").length+'%');
}
update
such code will change column width of the .column to 33% $(".column").css('width', '33%');
for dynamic changes we have to know how many of .column are visible now we can count it like this $(".column:visible").length
so we are dividing 100 block width on visible .column count 100/$(".column:visible").length
as css property is in % we have to add it 100/$(".column:visible").length+'%')
and so we have final code $(".column").css('width', 100/$(".column:visible").length+'%');
Also we have to wait until animation end to do calculations
.toggle(1500, function() {
columnCalc();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.