Have these css collapsable divs open by default? - html

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">
Open
<div id="content">
Close
<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!

Answer 1

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">
Open
<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/

Answer 2

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).

Answer 3

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.