Kami Kami - 6 months ago 8
HTML Question

Read more toggle with <br> in text makes the empty space and pull down my "more" button

I have created a "read more" toggle with pure css.

I have text in

<p class="read-more-wrap">
and
<span class="read-more-target">
and also using
<ol class="read-more-wrap"> <li class="read-more-target">
for having listed text. But this just give me empty space and pulls my "More" button down. It looks like it has a lot of padding, but does not.
Also if I apply
<br>
on the next it will pull the "More" button down. This empty space can be seen when the text is hiding. Once I click "More" button the bottom seems to go back to this original spacing.

Can somebody please help me out? I don't want unnecessary large empty space on the top of my "More" button. Please help me.



.the-alternative{
text-align: left;
display: inline-block;
background: rgba(29, 15, 6, 0.9);
padding: 1em;
}

.taplogo-article{
display: inline-block;
float:right;
margin-top: -4px;
}

.read-more-wrap{
margin-top: 10px;
margin-bottom: 10px;
}

.read-more-state{
display:none;
}

.read-more-target{
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
content: 'More';
}

.read-more-state:checked ~ .read-more-trigger:before {
content: 'Less';
}

.read-more-trigger {
margin-top: 40px;
cursor: pointer;
display: block;
padding: 0.3em;
background-color: rgba(0, 0, 0, 0.5);
font-size: .9em;
line-height: 2;
border: 1px solid #d8d8d8;
border-radius: .25em;
margin: 0 auto;
width: 90px;
text-align: center;
}

#ira article {
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 25px rgba(0,0,0,0.3);
border: 1px solid rgba(150,150,150,0.1);
background-color: rgba(126, 126, 126, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');
width: 920px;
float: right;
margin-bottom: 95px;
margin-left: auto;
margin-right: auto;
margin-top: 95px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 10px;
}

#ira {
min-height: 500px;
overflow: hidden;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
background-color: #333;
background-image: url(../images/background9.jpg);
}

<section id="ira" class="story" data-speed="16" data-type="background" data-offsetY="250">
<div id="wrapper">
<article>
<p class="the-alternative">Website</p>
<p class="taplogo-article"><img src="images/tapjapanlogo.png" alt="TAP Japan" width="150" height="52" /></p>

<img src="images/image3.jpg" alt="TAP Japan" width="100%" />
<input type="checkbox" class="read-more-state" id="post-3" />
<h2>Title 1</h2>
<p class="read-more-wrap"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<span class="read-more-target">Lorem Ipsum is simply dummy text of the printing and typesetting.
<ol class="read-more-wrap">
<li class="read-more-target">Even with access to the Internet and fund databases, many investors in Japan are unsatisfied with the available information.</li>
<li class="read-more-target">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ol>

<p class="read-more-wrap">
<span class="read-more-target">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</span>
</p>
</span>
</p>

<label for="post-3" class="read-more-trigger"></label>




Answer

I had to make a quite a few changes in your code to make it work.

  • Your html was incorrect and caused a blank paragraph above the button.
  • I removed the margins from .read-more-wrap.
  • I had to add the read-more-target class to some of the read-more-wrap elements to avoid extra spacing and change the CSS so it applies to them too.
  • I replaced your CSS height rules with visibility which I think is much better.

.the-alternative {
  text-align: left;
  display: inline-block;
  background: rgba(29, 15, 6, 0.9);
  padding: 1em;
}
.taplogo-article {
  display: inline-block;
  float: right;
  margin-top: -4px;
}
.read-more-state {
  display: none;
}
.read-more-target {
  visibility: collapse;
  opacity: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target,
.read-more-state:checked ~ .read-more-target {
  visibility: visible;
  opacity: 1;
  font-size: inherit;
}
.read-more-state ~ .read-more-trigger:before {
  content: 'More';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Less';
}
.read-more-trigger {
  margin-top: 40px;
  cursor: pointer;
  display: block;
  padding: 0.3em;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: .9em;
  line-height: 2;
  border: 1px solid #d8d8d8;
  border-radius: .25em;
  margin: 0 auto;
  width: 90px;
  text-align: center;
}
#ira article {
  color: #FFFFFF;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(150, 150, 150, 0.1);
  background-color: rgba(126, 126, 126, 0.6);
  filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');
  width: 920px;
  float: right;
  margin-bottom: 95px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 95px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
}
#ira {
  min-height: 500px;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-color: #333;
  background-image: url(../images/background9.jpg);
}
<section id="ira" class="story" data-speed="16" data-type="background" data-offsetY="250">
  <div id="wrapper">
    <article>
      <p class="the-alternative">Website</p>
      <p class="taplogo-article">
        <img src="images/tapjapanlogo.png" alt="TAP Japan" width="150" height="52" />
      </p>

      <img src="images/image3.jpg" alt="TAP Japan" width="100%" />
      <input type="checkbox" class="read-more-state" id="post-3" />
      <h2>Title 1</h2>
      <p class="read-more-wrap">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        <span class="read-more-target">Lorem Ipsum is simply dummy text of the printing and typesetting.</span>
      </p>
      <ol class="read-more-wrap read-more-target">
        <li>Even with access to the Internet and fund databases, many investors in Japan are unsatisfied with the available information.</li>
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
      </ol>

      <p class="read-more-wrap read-more-target">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</span>
      </p>

      <label for="post-3" class="read-more-trigger"></label>