0

I have two long introductory articles on the home page. They are only necessary for first time visitors so I want to simply show a summary with the option to expand it.

My issue is that as the articles are long, the 'HIDE' option needs to be at the END of the article. This makes the radio/input option limited unless I can figure out a way to activate it from the end. Is there a way to trigger it using only css?

The site is CSS only. I am not concerned with outdated browsers but I would like it to be SEO friendly (readable) and not have any security triggers (hence no scripts).

I've read through everything I could find, but the options either require the same trigger to activate show/hide (not user friendly in my case as user would have to search for it within the article) or JS. I've tried playing with links and buttons to no avail. I've considered using a dialog box, but that also requires JS to activate. Modal pop-up is a possibility, but I am not sure how that reacts with pop-up blockers so I have it as a last resort.

The other responses are somewhat dated, so I was hoping that there are some techniques that now have wider support that could be considered.

Here is the jsfiddle.

/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */

#More:checked~#Art1 {
 display: block;
}

/*Trying to get it to close: */

#Less {
  display: none}
#Less:checked~#Art2 {
 display: none;
}  

/* OPTION 2 */
.option2 {
  background-color: yellow;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.text2b {
  background: #bbb;
  border-radius: 5px;
  width: 70%;
  position: relative;
  transition: all 5s ease-in-out;
}

.text2b .close {

  transition: all 200ms;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}


  
<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>

<div id="Art1">
  <p>
  Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
  
</div>

<!--OPTION 2 -->

<div id="option2a" class="option2">
  
  <p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
  </p><a href="#option2b">MORE</a>

<div id="option2b" class="overlay">
  <div class='text2b'>
  <p>
  Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
  
  <a class="close" href="#">CLOSE</a>
 
 </div>
 </div>
<p>
 Other stuff... Meant only to check positioning of Modal.
</p>

The fiddle shows this option and a modal version I have been playing with. Other ideas that fit the prerequisites are welcome.

Smokva
  • 1
  • 2
  • Check out this https://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used – Aravind S Jul 16 '18 at 06:31
  • Yes. Saw that. Good ideas but all have same triggers for show/hide. I need my 'hide' at the bottom. – Smokva Jul 16 '18 at 06:42
  • by telling my hide at the bottom means? – Aravind S Jul 16 '18 at 06:45
  • The hide option should be at the end of the article. User should not search for it. If the above code would work, it would be perfect. But radio buttons only show/hide content below it, not above it. – Smokva Jul 16 '18 at 06:48
  • using CSS you can position it to bottom..right? – Aravind S Jul 16 '18 at 07:44
  • I don't think I can move an input field with css to appear at the bottom and still work, but if I could.... theoretically that probably could solve the problem. If you run the fiddle, you will see exactly how the MORE and LESS should appear to the user. The MORE input field works great (showing and hiding), but the LESS field won't work. In fact, there may end up being an issue with having two input fields targeting the same div. Technically, I could use one input field, as long as visually, that field moves to the end of the article when it is expanded. Not sure that's possible though. – Smokva Jul 16 '18 at 15:15
  • Any thoughts whatsoever? If a CSS guru out there believes this is impossible without JS, maybe they can say that as well so that we can at least have a clear answer for this fairly common technique. – Smokva Jul 18 '18 at 16:31
  • did you tried anything else? – Aravind S Jul 18 '18 at 17:01
  • I tried changing the order in the html; I tried using links, buttons and focus instead of input, and I tried to use them to trigger original input (the MORE). I did try to reposition the MORE input after checkbox activated (your idea about positioning) but could not do it. So I'm at a loss what else to try. I may have to use a modal although I really would rather not. That's why even a few people saying I'm sol would be helpful. At least I can be certain I tried everything. – Smokva Jul 18 '18 at 23:20

1 Answers1

0

I had just about given up on this technique, but surprisingly, there is a solution. Evidently you can tie multiple labels to one form control. So by simply adding a label (not input field) for "MORE" at the END of the article, it actually triggers the original input. No extra CSS required.

Works like a charm in FF and while I cannot see why there would be an issue in other browsers, I have not had an opportunity to verify.

Full credit for this brilliantly simple solution goes to Beverleyh at CSS-Tricks:
CSS-Tricks Forum

I hope this helps others. I was not really aware of this feature but could see many uses for it.

Smokva
  • 1
  • 2