Employing solely CSS code, I have successfully implemented a feature to display and hide full paragraphs. The code snippet below demonstrates its functionality. However, the issue arises when the "Show More" button is visible even for short paragraphs that do not require expansion. How can the button be hidden and only appear when the text length warrants it? Furthermore, for longer paragraphs that necessitate the button, I wish to include three dots at the end of the sentence (...) to indicate that more content is available. These dots should disappear when the paragraph is expanded and reappear when it is collapsed.
Disclaimer: I am seeking a CSS-only solution without the use of jQuery or JavaScript to maintain simplicity and avoid potential complications.
.panel-wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.show, .hide {
position: absolute;
bottom: -1em;
z-index: 100;
text-align: center;
color: red;
}
.hide {
display: none;
}
.show:target {
display: none;
}
.show:target ~ .hide {
display: block;
}
.show:target ~ .panel {
max-height: 100%;
}
.show:target ~ .fade {
margin-top: 0;
}
.panel {
position: relative;
width: auto;
max-height: 40px;
overflow: hidden;
}
.fade {
height: 20px;
position: relative;
}<div class="panel-wrapper">
<a href="#show1" class="show btn" id="show1">Show more</a>
<a href="#hide1" class="hide btn" id="hide1">Show less</a>
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
<a href="#show2" class="show btn" id="show2">Show more</a>
<a href="#hide2" class="hide btn" id="hide2">Show less</a>
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
<a href="#show3" class="show btn" id="show3">Show more</a>
<a href="#hide3" class="hide btn" id="hide3">Show less</a>
<div class="panel">
Consider this short text. Short enough to hide "Show More" button.
</div>
<div class="fade"></div>
</div>