CSS-only "Read More" button failing to function

Question

CSS-only "Read More" button failing to function

I am currently utilizing Wordpress and attempting to integrate the following code: https://codepen.io/Idered/pen/AeBgF

HTML:

    .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: 'Show more';
    }

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

    .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    }

<div>
    <input type="checkbox" class="read-more-state" id="post-2" />

    <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
    </ul>
  
    <label for="post-2" class="read-more-trigger"></label>
    </div>

Nevertheless, I am encountering some challenges - a gray line keep showing up (which can be toggled) instead of the show more button - mirroring the issue faced by this user as well

You can view our shared problem here:

Your assistance on this matter would be highly appreciated - thank you in advance.

css

Answer 1

Answer №1

The issue lies in the hierarchy of your label within your website. The tilde operator ~ only targets sibling elements, not their children or grandchildren. Let me illustrate with an example. Take a look at the code snippet below.

.test ~ .example {
   background:green;
}

<p class="test">Test</p>
<p class="nothing">Nothing</p>
<p class="example">Example</p>
<p><span class="example">Second Level Example</span></p>

The .test class currently selects all sibling elements with the .example class and applies a green background color. We have introduced the .example class for the second level. Your CSS will not target those elements. In your original code, the label is nested under the p, which is why it does not display the content "Show More" for your label. One solution is to remove the p element and keep the label on the same hierarchical level. Alternatively, update your CSS as shown below to target the child elements.

.read-more-state ~ p > label.read-more-trigger:before {
content: 'Show more';
}

.read-more-state:checked ~ p > label.read-more-trigger:before {
content: 'Show less';
}

Here is an implementation of your example similar to the live code.

.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 ~ p > label.read-more-trigger:before {
    content: 'Show more';
    }

    .read-more-state:checked ~ p > label.read-more-trigger:before {
    content: 'Show less';
    }

    .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    }

<div>
    <input type="checkbox" class="read-more-state" id="post-2" />

    <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
    </ul>
  
    <p><label for="post-2" class="read-more-trigger"></label></p>
    </div>

Answer 2

The issue lies in the hierarchy of your label within your website. The tilde operator ~ only targets sibling elements, not their children or grandchildren. Let me illustrate with an example. Take a look at the code snippet below.

.test ~ .example {
   background:green;
}

<p class="test">Test</p>
<p class="nothing">Nothing</p>
<p class="example">Example</p>
<p><span class="example">Second Level Example</span></p>

The .test class currently selects all sibling elements with the .example class and applies a green background color. We have introduced the .example class for the second level. Your CSS will not target those elements. In your original code, the label is nested under the p, which is why it does not display the content "Show More" for your label. One solution is to remove the p element and keep the label on the same hierarchical level. Alternatively, update your CSS as shown below to target the child elements.

.read-more-state ~ p > label.read-more-trigger:before {
content: 'Show more';
}

.read-more-state:checked ~ p > label.read-more-trigger:before {
content: 'Show less';
}

Here is an implementation of your example similar to the live code.

.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 ~ p > label.read-more-trigger:before {
    content: 'Show more';
    }

    .read-more-state:checked ~ p > label.read-more-trigger:before {
    content: 'Show less';
    }

    .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
    }

<div>
    <input type="checkbox" class="read-more-state" id="post-2" />

    <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
    </ul>
  
    <p><label for="post-2" class="read-more-trigger"></label></p>
    </div>

Answer 3

Answer №2

I believe this is what you are looking for :)

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

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

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

.show-more-state ~ .show-more-trigger:before {
  content: 'Display more';
}

.show-more-state:checked ~ .show-more-trigger:before {
  content: 'Display less';
}

.show-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0px 10px;
    color: #fff;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #dea119;
    border-radius: 20px;
    background-color: #b9890c;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

/* Additional styling */ 
body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: .25em;
}
p:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="show-more-state" id="post-1" />

  <p class="show-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="show-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
  
  <label for="post-1" class="show-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="show-more-state" id="post-2" />

  <ul class="show-more-wrap">
    <li>Bootstrap</li>
    <li>Javascript</li>
    <li class="show-more-target">HTML 5</li>
    <li class="show-more-target">Css 3</li>
  </ul>
  
  <label for="post-2" class="show-more-trigger"></label>
</div>

Answer 4

I believe this is what you are looking for :)

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

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

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

.show-more-state ~ .show-more-trigger:before {
  content: 'Display more';
}

.show-more-state:checked ~ .show-more-trigger:before {
  content: 'Display less';
}

.show-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0px 10px;
    color: #fff;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #dea119;
    border-radius: 20px;
    background-color: #b9890c;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

/* Additional styling */ 
body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: .25em;
}
p:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="show-more-state" id="post-1" />

  <p class="show-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="show-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
  
  <label for="post-1" class="show-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="show-more-state" id="post-2" />

  <ul class="show-more-wrap">
    <li>Bootstrap</li>
    <li>Javascript</li>
    <li class="show-more-target">HTML 5</li>
    <li class="show-more-target">Css 3</li>
  </ul>
  
  <label for="post-2" class="show-more-trigger"></label>
</div>

CSS-only "Read More" button failing to function

Answer №1

Answer №2

Similar questions

Ensure that selected options are unique across multiple selections

Creating a consistent visual appearance for disabled inputs in Bootstrap 4 to match regular inputs

I need to figure out how to incorporate a specific feature into my personal list by leveraging Javascript

Steps for including a solid bottom border in a toggled navigation bar that is responsive

The snap drag position resets to its original placement when dragged for a second time

Contrasting CSS Attribute Selectors and Pseudo-Elements in Input Tags

Is there a way for me to obtain the present value of the chosen button in the list below?

Issues with zoom functionality not functioning properly within IE11

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

Using jQuery, generate a div element and display it in full screen mode

The z-index of two elements seems to be behaving differently than anticipated

What are some techniques for concealing a rendered element retrieved using the fetch API?

What is the best way to highlight and extract only the white-coded texts on VSCode to facilitate the process of translating webpages manually?

What is the best way to ensure that a div appears below, rather than alongside, another one

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

Chrome fails to load webfont upon page initialization

Progress Bar HTML with PHP

Problem with ngStyle: Error indicating that the expected '}' is missing

stop cascading style sheets from being overwritten