Search code examples
cssamp-html

How to change CSS class to ascendent

I can't figure out how to do this, and don't know if it's even possible:

<div class="container">
    <div class="text"></div>
    <a href="javascript:;" class="view">View more</a>
<div>

How can I add a class to the div .text if I click on the link .view with only CSS? I can't use javascript as I'm building a page with its css for AMP

Solution

  • If you can give a fragment to the anchor instead of 'javascript:;' then you can utilize the :target state of anchor.

    #view-more {
  display: none;
}

#view-more:target {
  display: block;
}
  <div class="container">        
        <a href="#view-more" class="view">View more</a>
        <div class="text" id="view-more">text</div>
    <div>

    https://jsfiddle.net/karthick6891/g89fdagu/

    But the best alternative is to use checkbox so you will have the :checked attribute, which is more robust