Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

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.


.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%;
}

Open in new window



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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of weikelbob

ASKER

Perfect. This is exactly what I want! Do I just adjust

.read-more-state:checked ~ .read-more-target {
  max-height: 50em;
}

to account for the height of my paragraph?
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 -
.read-more-state:checked ~ .read-more-target {
  max-height: 50em;
}

Open in new window

Excellent!