Search code examples
htmlcsspseudocodetarget

How to get another div affected when another one is targeted

/* Header styles */

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
  background-color: aqua;
  text-align: center;
  padding: 20px 0px;
}

header a {
  font-size: xx-large;
  margin: 10px;
  text-decoration: none;
  color: black;
  background-color: cyan;
  font-weight: bolder;
  padding: 0px 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header a:hover {
  background-color: darkcyan;
  color: white;
}


/* Header Styles End */


/* --- */


/* Sections Style */

#gallery,
#about,
#contact {
  display: none;
}

main {
  padding: 25px;
  background-color: aliceblue;
  margin: 10px;
}

#img {
  width: 100px;
  height: 100px;
}

#gallery:target {
  display: block !important;
}

#gallery:target~#home {
  display: none !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <a href="#home">Home</a>
    <a href="#gallery">Gallery</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </header>
  <main>
    <div id="home">
      <h1>
        Welcome To the Web Page where there at 4 sections! -
        <font size="10" color="grey">Home</font>
      </h1>
      <h2>Click them to see their relevant sections!</h2>
      <p>
        Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore
        hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum
        Dolor sit amet consectetur
      </p>
      <h2>And that's it, Here's a soothing gif</h2>
      <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
    </div>
    <div id="gallery">
      <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
    </div>
    <div id="#about"></div>
    <div id="#contact"></div>
  </main>
</body>

</html>

Hello. I have 2 DIVs with the id #home and #gallery. When I click gallery I would like the home section to be hidden and the gallery to be revealed. I set the id gallery to display:none; and then set it as display:block by using the pseudo selector :target...Like this

#gallery {
    display: none;






/* Header styles */
* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
    background-color: aqua;
    text-align: center;
    padding: 20px 0px;
}
header a{
    font-size: xx-large;
    margin: 10px;
    text-decoration: none;
    color: black;
    background-color:cyan;
    font-weight: bolder;
    padding: 0px 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header a:hover {
    background-color: darkcyan;
    color: white;
}
/* Header Styles End */
/* --- */
/* Sections Style */
#gallery, #about, #contact {
    display: none;
}
main {
    padding: 25px;
    background-color: aliceblue;
    margin: 10px;
}
#img {
    width: 100px;
    height: 100px;
}
#gallery:target {
    display: block !important;
}
#gallery:target ~ #home {
    display: none !important;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#home">Home</a>
        <a href="#gallery">Gallery</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </header>
    <main>
        <div id="home">
            <h1>
                Welcome To the Web Page where there at 4 sections! - 
                <font size="10" color="grey">Home</font>
            </h1>
            <h2>Click them to see their relevant sections!</h2>
            <p>
                Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum Dolor sit amet consectetur
            </p>
            <h2>And that's it, Here's a soothing gif</h2>
            <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
        </div>
        <div id="gallery">
            <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
        </div>
        <div id="#about"></div>
        <div id="#contact"></div>
    </main>
</body>
</html>







}
#gallery:target {
    display: block !important;
}

It does work but the gallery section pops up below the home section. What I want is the home section must be hidden, or as you would say in technological terms, display:none So I would like the home section to be affected by the #gallery being targeted. I've tried this

#gallery:target ~ home {
    display: none !important;
}

But it doesn't work. Here's an image in case you can't understand the layout Without the target #gallery

Without the target #gallery

With the target #gallery

With the target #gallery

Please let me know if you can answer this question...

Solution

  • You can use some JavaScript for this feature. The following code runs a function when the gallery text or the home text is clicked. What it essentially does is hide all the other sections except the one it is supposed to show. The functions add a hide class to all the sections, which hides them, except the one that is required to be shown.

    function showHome() {
  sections.forEach(s => s.classList.add("hide"));
  home.classList.remove("hide");
}

function showGallery() {
  sections.forEach(s => s.classList.add("hide"));
  gallery.classList.remove("hide");
}

const home = document.getElementById("home");
const gallery = document.getElementById("gallery");
const sections = document.querySelectorAll(".section");
    .hide {
  display: none !important;
}

.section {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#home {
 background-color: green;
}

#gallery {
 background-color: blue;
}
    <div>
  <p onclick="showHome()">Home</p>
  <p onclick="showGallery()">Gallery</p>
</div>
<div class="section" id="home">
  <p>This is home!</p>
</div>
<div class="section hide" id="gallery">
  <p>This is gallery!</p>
</div>