Target pseudo-class not hidden content

Question

Target pseudo-class not hidden content

84 views Asked by josiperez At 29 January 2020 at 19:32

I'm trying to do an horizontal menu: when the user clicks (or tap) on one option, the content appears below the menu, at the same page; when the user clicks another option, the new content overlaps the old; the content on each option is variable - can be short or long, with scroll or not.

I tried made it using 'target' on tag p, based on this link: https://www.w3.org/Style/Examples/007/target.en.html

but when I use hr or div or other tags that are not only text, this content appears and it is not recognized inside the p tag, where should it be hidden.

body {
  margin:0;   
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }

<body>
 <p class="menu">  
  <a href="#item1" class="menuLink">Item 1</a>
  <a href="#item2">Item 2</a>
  <a href="#item3">Item 3</a>
 </p>
 
 <div class="items">
  <p id="item1">
   11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <br><br>
   Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
  </p>
  
  <p id="item2">
   22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <hr>
   Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
  </p>
  
  <p id="item3">
   33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <div>
    Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
   </div>
  </p>
 </div>
 
</body>

What I'm doing wrong?

Original Q&A

There are 2 answers

Diogo Peres On 29 January 2020 at 19:43

Your code will not work because you cannot have <hr> or <div> tags inside a paragraph as you have on item 2 and 3 respectively. Check: Putting <div> inside <p> is adding an extra <p>

If you remove them, the code will work as you intended I think.

Code below:

body {
  margin:0;   
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }

<body>
  <p class="menu">
    <a href="#item1" class="menuLink">Item 1</a>
    <a href="#item2">Item 2</a>
    <a href="#item3">Item 3</a>
  </p>

  <div class="items">
    <p id="item1">
      11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      <br><br>
      Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
    </p>

    <p id="item2">
      22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
    </p>

    <p id="item3">
      33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      <span>
        Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
      </span>
    </p>
  </div>

</body>

**jack.benson** · Accepted Answer · 2020-01-29 19:39:28

It looks like you could just add another CSS rule for each type of tag you want to hide. Something like this:

div.items hr:not(:target), div.items p:not(:target) {display: none}
div.items hr:target, div.items p:target { display: block; }

Just add as many rules as you need. Better yet, you could wrap all the items in a div and just put the p, hr, etc. inside of that.

<div class="items">
  <div id="item1">
    <p>Some text</p>
    <hr />
    <p>Something else</p>
  </div>
  <div id="item2">
     ...
  </div>
  ...
</div>

Then just do this:

div.items > div:not(:target) {display: none}
div.items > div:target { display: block; }

Hope that helps.

TechQA.

Target pseudo-class not hidden content

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in PSEUDO-CLASS

Popular Questions

Popular Tags

Trending Questions