I haven't really got experience using javascript, so I'm currently trying out the basic first steps of getting the hang of it.
I've got these four div boxes in parent-container with the flex-property, each box with 25% width.
<section>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</section>
When hovering over one of the boxes, that particular box gets 40% in width, and the remaining boxes gets reduced to 20%.
When you then click one of the boxes, that box gets 85% width, and the remaining boxes gets reduced to 5%.
If you then click another box, that box gets 85% width, and remaining boxes gets reduced to 5%.
To get back to the all-25%-width-boxes, using a simple cross will do the job (haven't coded this yet, though).
I started off by trying to do an all-CSS solution using input checkboxes, but quickly realized this would not work, as CSS do not have a selector that can have effect on previous siblings.
Therefore, I need two javascript functions.
(1) When clicking one of the boxes, that element gets a certain width, as well as the remaining boxes getting a smaller width.
(2) If you have already clicked one of the boxes, which now is 85% width, if you click one of the other boxes, that particular box is now "the selected one", and will be 85% in width.
I have a feeling it's two simple functions. I just do not have experience using javascript, so I'm uncertain of what to write.
As said CherryDT it can be done by flex-basis
Or if can be done with css e.g. radio group and checked
section {
position: relative;
display: flex;
width: 100%;
height: 100px;
}
input {
appearance: none;
display: block;
padding: 0;
margin: 0;
width: 25%;
height: 100%;
}
.box1 {
background-color: rgba(0,0,0,.1)
}
.box2 {
background-color: rgba(0,0,0,.2)
}
.box3 {
background-color: rgba(0,0,0,.3)
}
.box4 {
background-color: rgba(0,0,0,.4)
}
input:checked + section:hover input {
width: 20%;
}
input:checked + section:hover input:hover {
width: 40%;
}
input:not(:checked) + section input {
width: 5%;
}
input:not(:checked) + section input:checked {
width: 85%;
}
input:checked + section > label {
display: none;
}
label {
position: absolute;
}<input id="hidden" hidden type="radio" name="group" class="box1" value="0" checked />
<section>
<label for="hidden">
X
</label>
<input type="radio" name="group" class="box1" value="1"/>
<input type="radio" name="group" class="box2" value="2"/>
<input type="radio" name="group" class="box3" value="3"/>
<input type="radio" name="group"class="box4" value="4"/>
</section>Here is one possible solution using jQuery:
$(".box").on({
mouseenter: function(){
if ($(".box.clicked").length) return false;
$(this).siblings(".box").css("width","20%");
$(this).css("width","40%");
},
mouseleave: function(){
if ($(".box.clicked").length) return false;
$(this).siblings(".box").css("width","25%");
$(this).css("width","25%");
}
})
$(".box").on("click", function(e){
$(".box.clicked").css("width","5%");
$(".box.clicked").removeClass("clicked");
$(this).addClass("clicked");
$(this).css("width","85%");
$(this).siblings(".box").css("width","5%");
if ($(e.target).hasClass("exit")) {
$(this).removeClass("clicked");
$(this).css("width","25%");
$(this).siblings(".box").css("width","25%");
}
})* {
margin: 0;
padding: 0;
}
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 250px;
}
.box {
width: 25%;
height: 250px;
position: relative;
}
.box1 {
background-color: red;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: green;
}
.box4 {
background-color: yellow;
}
.box .exit {
position: absolute;
cursor: pointer;
top: 5px;
right: 10px;
display: none;
font-weight: bold;
}
.box.clicked .exit {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<section>
<div class="box box1">
<p class="exit">×</p>
</div>
<div class="box box2">
<p class="exit">×</p>
</div>
<div class="box box3">
<p class="exit">×</p>
</div>
<div class="box box4">
<p class="exit">×</p>
</div>
</section>You could also asssign those properties to classes and then just add/remove classes on the events, but structure will be overall the same.
Next time, please try to code yourself first and provide examples of what you've tried.