Have these css collapsable divs open by default?

Question

I'm using jsfiddle.net/ts4dk6hp/ and wondering if I can

a) have the content open by default

b) have a smooth css transition to open (with no javascript)

HTML

<div id="show">
    <a href="#show" id="open" class="none">Open</a>
    <div id="content">

        <a href="#hide" id="close" class="none">Close</a>
        <br>some text...
    </div>
</div>

CSS

#content {
    display: none;
}
#show:target #content {
    display: block;
}
#show:target #open {
    display: none;
}

Any help would be great thanks!

score 1 · Answer 1 · answered May 07 '15 at 03:56

First, I suggest you use javascript instead of just css. 2nd, I want to you to remember that css animations are only supported by newer browsers.

I have updated your jsfiddle, hopefully it will be helpful for you.

HTML

<div id="show">
<a href="#show" id="openclose">Open</a>
<div id="content">
    <br>some text...
    <br> Mur text, duh...
    <br> Lorem
    <br> Ipsum
    <br> Watchama sayin'?
    <br> Have fun!
</div>

CSS

#content {
    transition: opacity 1s ease-in, height 500ms ease-out;
    opacity: 0;
    height: 200px;
    width: 200px;
    background: gray;
}

JS

var open = true;

$('#openclose').click(function() {
    if (!open) {
        open = true;
        $(this).text('Close');
        $('#content').css({
            opacity: 1,
            height: '200px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    } else {
        open = false;
        $(this).text('Open');
        $('#content').css({
            opacity: 0,
            height: '0px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    }
});

http://jsfiddle.net/MashedPotatoes/ts4dk6hp/13/

That's because I didn't let it fade in on page load, I could if I want to. Here ya go http://jsfiddle.net/MashedPotatoes/ts4dk6hp/17/ — mashedpotats, May 07 '15 at 04:52
I guess, I haven't really considered that though, yours were good too. Love how you expanded towards pure javascript. Congrats, Congrats. Have fun with the code too, jnapier! — mashedpotats, May 07 '15 at 04:57
Right, and if you use pure JavaScript on your own, you don't have to really care, cause the people who are going to be using the site aren't going to like at the source code anyways. — mashedpotats, May 07 '15 at 05:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77151/discussion-between-mashedpotatoes-and-humble-rumble-6x3). — mashedpotats, May 07 '15 at 05:15

score 0 · Answer 2 · answered May 07 '15 at 03:52

0

To expand on humble.rumble.6x3's comment, you cannot do the first OR the second of your requirements without JavaScript. The main reason being that CSS is designed to style the content, not perform animations and interact with events (with exceptions).

answered May 07 '15 at 03:52

SalmonKiller

2,183
4
27
56

ketan · Answer 3 · 2015-05-07T05:04:57.330

Following way you can do using css:

1.) content open by default And smooth css transition to open (with no javascript).

#open {
    display: none;
}
#show:target #content {
     opacity: 0;
}
#show:target #close {
    display: none;   
}
#show:target #open {
    display: block;
}
#content{
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
}

#show{
  display:table;
}

<div id="show">
    <a href="#show" id="close" >Close</a>
    <a href="#hide" id="open" >Open</a>
    <div id="content">
         <br>some text...
    </div>
</div>

Hope it helps.

Have these css collapsable divs open by default?

3 Answers3