CODEWITHSUNDEEP
htmlcss
Varun
Varun

Reputation: 901

Create horizontal collapsible accordion with pure CSS

I have 4 divisions as follows :enter image description here

On hovering the 1st element it becomes :enter image description here

ie I changed the CSS of the next elements on hovering the 1st using '~' selector.

/* hover on 1 */
#pillar1:hover {
width: 64%;
}
#pillar1:hover ~ #pillar2{
width: 12%;
}
#pillar1:hover ~ #pillar3{
width: 12%;
}
#pillar1:hover ~ #pillar4{
width: 12%;
}

But on hovering the next divisions, using the code

/* hover on 2 */
#pillar2:hover {
width: 64%;
}
#pillar2:hover ~ #pillar1{
width: 12%;
}
#pillar2:hover ~ #pillar3{
width: 12%;
}
#pillar2:hover ~ #pillar4{
width: 12%;
}

the transition is not happening.
HTML

 <section class="pillars">

<div id="pillar1"></div>
    <div id="pillar2"></div>
<div id="pillar3"></div>
<div id="pillar4"></div>
</section>

How can I do this?

Upvotes: 3

Views: 5288

Answers (5)

Mr. Alien
Mr. Alien

Reputation: 157294

When you use ~ it will select elements which are followed after the element which is hovered, so just one property will do the job for you i.e

display: flex;

Demo

HTML

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: flex;
}

.wrap > div {
    height: 100px;
    width: 33%;
    flex: 1;
    border: 1px solid #f00;
    -webkit-transition: flex .5s;
    transition: flex .5s;
}

.wrap > div:hover {
    flex: 3;
}

Upvotes: 8

user652649
user652649

Reputation:

Similar solution to those already posted, but imho the only actually rock solid

JSFIDDLE DEMO

<div class="wrap">
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
    <div><img src="http://lorempixel.com/600/300/people/5/" style="display:block;"/></div>
</div>

.wrap
{
    display:table;
    width:100%;
    table-layout:fixed;
}

.wrap > div {
    display:table-cell;
    border:1px red solid;
    overflow:hidden;
    height:100px;
    transition:width 1s;
    width:33.333%;
}

.wrap > div:hover {
    width: 70%;
}

Upvotes: 1

gandaliter
gandaliter

Reputation: 10101

How about using a wrapper div:

<div class="wrapper">
  <div style="background-color: blue;"></div>
  <div style="background-color: red;"></div>
  <div style="background-color: green;"></div>
  <div style="background-color: purple;"></div>
</div>

and then in the css:

.wrapper div {
  width: 25%;
  height: 100px;
  float: left;
}
.wrapper:hover div {
  width: 12%;
}
.wrapper div:hover {
  width: 64%;
}
.wrapper {
    width: 100%;
}

JSFiddle: here

Upvotes: 0

King King
King King

Reputation: 63317

I think you can have some workaround like this:

.pillars > div {
  width: 25%;
  float:left;
  ...
}
.pillars:hover > div {
  width:12%;
}
.pillars > div:hover {
  width: 64%;
}

Demo.

The reason we have to do it with a workaround is we can't traverse back using CSS3 selector, that is when you hover on a list item, you can't traverse back the previous list items to set their width to 12%. However, hovering on list item also triggers hovering on the parent container. So we can make it work by setting the width:12% to all the list items on hovering the parent.

Upvotes: 3

SW4
SW4

Reputation: 71140

Updated: Demo Fiddle

HTML

<div class='expanded'></div>
<div></div>
<div></div>
<div></div>

CSS

html, body {
    width:100%;
    padding:0;
    margin:0;
}
div {
    float:left;
    width:12%;
    height:100px;
    border:1px solid red;
    background:lightgrey;
    transition:width 100ms ease-in;
    box-sizing:border-box;
}
.expanded {
    width:64%;
}

jQuery

$("div").hover(

function () {
    $("div").removeClass("expanded");
    $(this).addClass("expanded");
}, function () {
    $("div").removeClass("expanded");
    $("div:first").addClass("expanded");
});

Alternative Solution

HTML

<div class="table">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

html, body {
    width:100%;
    padding:0;
    margin:0;
}
.table {
    display:table;
    height:100px;
    width:100%;
}
.table div {
    display:table-cell;
    width:12%;
    border:1px solid red;
    background:lightgrey;
    transition:width 100ms ease-in;
}
.table div:hover {
    width:64%;
}

Upvotes: 1

Related Questions