weikelbob
asked on
Pure CSS/HTML: Different transitions when you press "Read More"
Making a pure CSS read more script.
Need to keep the display:none and display:block below
Looking for different transitions when you press the button.
Right now it just jumps down and up.
I got "transition : .25s ease;" working with my last script so I need it to be something different. But not even that transition is working right now in the script below. Need a completely different transition besides none and also besides "transition: .25 ease". It needs to be slower than no transition because there will be a lot of information and I don't want it to "jump" down and up.
Need to keep the display:none and display:block below
Looking for different transitions when you press the button.
Right now it just jumps down and up.
I got "transition : .25s ease;" working with my last script so I need it to be something different. But not even that transition is working right now in the script below. Need a completely different transition besides none and also besides "transition: .25 ease". It needs to be slower than no transition because there will be a lot of information and I don't want it to "jump" down and up.
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
display: none;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
display: block;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Read more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0px 0px 0px -1.5em;
color: #666;
font-size: 1.3em;
line-height: 2;
font-weight:bold;
color:#45bfff;
transition: 2s;
}
#readmore strong {
padding: 0%;
}
color: #c7b27e;
}
#readmore h2
{
font-size:150%;
}
<div id="readmore">
<input type="checkbox" class="read-more-state" id="post-1" />
<strong id="readmore" class="read-more-wrap"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> <span class="read-more-target">Libero fuga <br><br>facilis vel consectetur quos sapiente deleniti <br><br>eveniet dolores tempore eos deserunt officia quis ab? Excepturi <br><br>vero tempore minus beatae voluptatem! </span> </strong>
<label for="post-1" class="read-more-trigger"></label>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
OK you do adjust the max-height: to deal with a larger display area for your read-more-target expansion height, , , but what I tried to tell you about, is that this also adjusts the collapse timing of that div, since the browser MUST use the conditions set in the CSS as max-height: 50em; for the transition speed calculation, it may look different than the speed of the expansion.
So Yes, you change the "Height" allowed with this -
So Yes, you change the "Height" allowed with this -
.read-more-state:checked ~ .read-more-target {
max-height: 50em;
}
ASKER
Excellent!
ASKER
.read-more-state:checked ~ .read-more-target {
max-height: 50em;
}
to account for the height of my paragraph?