Question 277735 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make a div disappear when any other div is targeted?

I’ve been using CSS tabs to make one page, in which you can navigate through different content using :target. I want to find a way to make it so that one div shows as the home page, without anything being clicked, and it disappears when a div is targeted. I don’t want it to be an onclick event, since I want it to be invisible from the other content if you’re coming from a link with the targeted ID.

I feel like my best example of what I mean is similar to how carrds work, with the first control being visible when the website loads, but disappearing if there’s a different one targeted? I know that for that, it’s the same div, but I’m hoping for a simpler solution than whatever carrd has going on. Example

So, this would all be in one HTML document, but I basically want a home page to appear if there’s no div targeted, and it goes away if you target a div.

Ideally, in the url, index.html would show the home div, index.html#div01 would make that home div disappear, and instead show a different div with the same content, and index.html#div02 would have completely different content, but I don’t know how to get that first part to work. I’ve been playing around with pseudo-classes and whatever potential solutions I could find online, but nothing’s worked quite the way I want it to. Simplifying what I have by removing the unhelpful JavaScript and extra styling, this is what I’m currently sitting with.

Example of what I tried

.tabcontent {
  display: none
}

.tabcontent:target {
  display: block
}

.home {
  display: block
}
<div>
  <a href="#div01"><button>Div 01</button></a>
  <a href="#div02"><button>Div 02</button></a>
</div>
<div class="home tabcontent">
  <p>So this is the home page...</p>
</div>
<div id="div01" class="tabcontent">
  <p>So this is the home page...</p>
</div>
<div id="div02" class="tabcontent">
  <p>And this is something different!</p>
</div>

While I’d like to avoid jQuery if possible, I’ll try out anything!

Tags:

3

Answers


  1. 0

    I am not sure if I interpreted your question correctly, but I’ve found something called the "general sibling" combinator which can be used in CSS to hide the ".home" div content when another ".tabcontent" div is targeted. So, when no div is targeted, the home div will be visible, and it will disappear when another div is targeted.

    Login or Signup to reply.
  2. 0

    You can do it in pure CSS by leveraging :not() and :has().

      body:not(body:has(.tabcontent:target)) .home {
    display: block;
  }

    They have good support in modern browsers (with the notable exception of Firefox) but you might need a fallback for old browsers. In this example we check if the browser @supports relational pseudo classes and if not apply some Javascript instead.

    //optional JS fallback for if :has is not supported.
try {
    document.querySelector(":not(:has(+ *))");
} catch (error) {
    //not suppoted. do something else
    document.querySelector("a[href='#div01']").click();//maybe manually trigger the click
}
    .tabcontent {
  display: none
}

.tabcontent:target {
  display: block
}

@supports selector(:not(:has(+ *))) {
  body:not(body:has(.tabcontent:target)) .home {
    display: block;
  }
}
    <div>
  <a href="#div01"><button>Div 01</button></a>
  <a href="#div02"><button>Div 02</button></a>
</div>
<div id="div01" class="home tabcontent">
  <p>So this is the home page...</p>
</div>
<div id="div02" class="tabcontent">
  <p>And this is something different!</p>
</div>
    Login or Signup to reply.
  3. 0

    I will see that this way…

    document.addEventListener('DOMContentLoaded', evt =>
  {
  let hashValues = [...document.querySelectorAll('input[name="pageSelector"]')].map(elm=>`#${elm.id}` );

  if ( hashValues.includes( window.location.hash ) )
    {
    document.querySelector(window.location.hash).checked = true;
    }
  document.querySelectorAll('input[name="pageSelector"]').forEach( elmR => 
    {
    elmR.onchange =_=>
      {
      window.location.hash = elmR.id;
      }
    });
  });
    html {
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 16px;
  }
input[name="pageSelector"]             ,
#div00:checked ~ section:not(#part_00) ,
#div01:checked ~ section:not(#part_01) ,
#div02:checked ~ section:not(#part_02) { 
  display : none; 
  }
input[name="pageSelector"] + label { 
  display       : inline-block;
  width         : 8em;
  border        : 1px solid darkgray;
  background    : aliceblue;
  text-align    : center;
  padding       : .3em 0 .4em 0;
  border-radius : .2em;
  margin: .2em;
  }
input[name="pageSelector"]:checked + label {   
  background    : lightblue;
  }
    <input type="radio" name="pageSelector" id="div00" checked value="" ><label for="div00">  home page   </label>
<input type="radio" name="pageSelector" id="div01"         value="" ><label for="div01">  see page 01 </label>
<input type="radio" name="pageSelector" id="div02"         value="" ><label for="div02">  see page 02 </label>



<section id="part_00">
  <p>So this is the home page...</p>
</section>
<section id="part_01">
  <p>So this is the page 01...</p>
</section>
<section id="part_02">
  <p>So this is the page 02...</p>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search