Show divs in identical position when clicking

Question

Show divs in identical position when clicking

There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location?

Another JavaScript question - Is there a more efficient way to write this script? It seems cumbersome for its purpose and I'm looking for suggestions on how to simplify it.

function about() {
  var about = document.getElementById("about");
  var contact = document.getElementById("contact");
  var work = document.getElementById("work");
  var blog = document.getElementById("blog");
  if (about.style.visibility === "hidden") {
    about.style.visibility = "visible";
    contact.style.visibility = "hidden";
    work.style.visibility = "hidden";
    blog.style.visibility = "hidden";
  } else {
    about.style.visibility = "hidden";
  }
}
/* Remaining JavaScript functions go here */

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* CSS styling continues here */

<main>
  <section id="about" style="visibility: hidden;">
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact" style="visibility: hidden;">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87eae6e4e3e2f1efc7e0eae6eeeba9e4e8ea">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0ada1a3a4a5b6a880a7ada1a9aceea3afad">[email protected]</a></a>
     /* HTML content continues here */
    </section>
</main>

javascript html css

Answer 1

Answer №1

Here is a rewritten version:

If you prefer not to take up unnecessary space, consider using display none/block instead of visibility.

Pure JavaScript

window.addEventListener("load",() => {

  document.querySelector("header").addEventListener("click",(e) => {
    const tgt = e.target;
    e.currentTarget.querySelector("a.active").classList.remove("active")
    tgt.classList.add("active")
    if (tgt.tagName === "A") {
      const id = tgt.href.split("#")[1];
      [...document.querySelectorAll("main section")].forEach(section => {
        section.classList.toggle("show",section.id === id)
      })
    }
  });
  document.querySelector(".active").click()
})

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;
}

header a {
  margin: 1rem;
}

main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
}

section {
  position: static;
  top: 50%;
}

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  body {
    font-size: 1.5rem;
  }
}

section { display:none  }
a { text-decoration:none }
.active { text-decoration: underline }
.show { display:block }

<header>
<a href="#about" class="active">About</a>   <a href="#work">Work</a>  <a href="#blog">Blog</a>
</header>
<main>
  <section id="about" >
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d8d4d6d1d0c3ddf5d2d8d4dcd99bd6dad8">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49995979091829cb49399959d98da979b99">[email protected]</a></a>
    <div id="social">
      <a href="https://instagram.com/machooper">I</a>
      <a href="https://twitter.com/mac_hooper">T</a>
      <a href="https://gitlab.com/macdevh">G</a>
    </div>
  </section>
  <section id="work">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Portfolio</p>
    </div>
  </section>
  <section id="blog">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Blog</p>
    </div>
  </section>
</main>

jQuery

$(function() {
  $("header").on("click", "a",function(e) {
    const $parent = $(this).closest("header");
    $("a",$parent).removeClass("active")
    $(this).addClass("active")
    const id = this.href.split("#")[1];
    $("main section").each(function()  {
        $(this).toggle(this.id === id)
    })
  });
  $(".active").click()
})

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;
}

header a {
  margin: 1rem;
}

main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
}

section {
  position: static;
  top: 50%;
}

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  body {
    font-size: 1.5rem;
  }
}

section { display:none  }
a { text-decoration:none }
.active { text-decoration: underline }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a href="#about" class="active">About</a>   <a href="#work">Work</a>  <a href="#blog">Blog</a>
</header>
<main>
  <section id="about" >
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49995979091829cb4919b95dd90838e93">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69b97959293809eb6919b97df808893">[email protected]</a></a>
    <div id="social">
      <a href="https://instagram.com/machooper">I</a>
      <a href="https://twitter.com/mac_hooper">T</a>
      <a href="https://gitlab.com/macdevh">G</a>
    </div>
  </section>
  <section id="work">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Portfolio</p>
    </div>
  </section>
  <section id="blog">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Blog</p>
    </div>
  </section>
</main>

Answer 2

Here is a rewritten version:

If you prefer not to take up unnecessary space, consider using display none/block instead of visibility.

Pure JavaScript

window.addEventListener("load",() => {

  document.querySelector("header").addEventListener("click",(e) => {
    const tgt = e.target;
    e.currentTarget.querySelector("a.active").classList.remove("active")
    tgt.classList.add("active")
    if (tgt.tagName === "A") {
      const id = tgt.href.split("#")[1];
      [...document.querySelectorAll("main section")].forEach(section => {
        section.classList.toggle("show",section.id === id)
      })
    }
  });
  document.querySelector(".active").click()
})

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;
}

header a {
  margin: 1rem;
}

main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
}

section {
  position: static;
  top: 50%;
}

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  body {
    font-size: 1.5rem;
  }
}

section { display:none  }
a { text-decoration:none }
.active { text-decoration: underline }
.show { display:block }

<header>
<a href="#about" class="active">About</a>   <a href="#work">Work</a>  <a href="#blog">Blog</a>
</header>
<main>
  <section id="about" >
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d8d4d6d1d0c3ddf5d2d8d4dcd99bd6dad8">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49995979091829cb49399959d98da979b99">[email protected]</a></a>
    <div id="social">
      <a href="https://instagram.com/machooper">I</a>
      <a href="https://twitter.com/mac_hooper">T</a>
      <a href="https://gitlab.com/macdevh">G</a>
    </div>
  </section>
  <section id="work">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Portfolio</p>
    </div>
  </section>
  <section id="blog">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Blog</p>
    </div>
  </section>
</main>

jQuery

$(function() {
  $("header").on("click", "a",function(e) {
    const $parent = $(this).closest("header");
    $("a",$parent).removeClass("active")
    $(this).addClass("active")
    const id = this.href.split("#")[1];
    $("main section").each(function()  {
        $(this).toggle(this.id === id)
    })
  });
  $(".active").click()
})

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;
}

header a {
  margin: 1rem;
}

main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
}

section {
  position: static;
  top: 50%;
}

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  body {
    font-size: 1.5rem;
  }
}

section { display:none  }
a { text-decoration:none }
.active { text-decoration: underline }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a href="#about" class="active">About</a>   <a href="#work">Work</a>  <a href="#blog">Blog</a>
</header>
<main>
  <section id="about" >
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49995979091829cb4919b95dd90838e93">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69b97959293809eb6919b97df808893">[email protected]</a></a>
    <div id="social">
      <a href="https://instagram.com/machooper">I</a>
      <a href="https://twitter.com/mac_hooper">T</a>
      <a href="https://gitlab.com/macdevh">G</a>
    </div>
  </section>
  <section id="work">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Portfolio</p>
    </div>
  </section>
  <section id="blog">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Blog</p>
    </div>
  </section>
</main>

Answer 3

Answer №2

For achieving these functionalities, my go-to tools are typically jQuery and custom HTML5 attributes.

In my CSS file, I define a class named "hide":

.hide { display: none !important; }

Within your HTML code, you can add an extra attribute (like data-toggleable) to sections:

<section id="work" class="hide" data-toggleable="true">

Then, in the JavaScript part, you can hide all elements with the data-toggleable attribute set to true using a single jQuery command:

$(this).find('[data-toggleable="true"]').addClass('hide');

This line targets all HTML elements with the data-toggleable attribute value as "true" and hides them. The advantage is that it won't redundantly apply the 'hide' class if it's already present on the element. Lastly, you can specifically display the section ID that needs to be visible:

$('#work').removeClass('hide');

Answer 4

For achieving these functionalities, my go-to tools are typically jQuery and custom HTML5 attributes.

In my CSS file, I define a class named "hide":

.hide { display: none !important; }

Within your HTML code, you can add an extra attribute (like data-toggleable) to sections:

<section id="work" class="hide" data-toggleable="true">

Then, in the JavaScript part, you can hide all elements with the data-toggleable attribute set to true using a single jQuery command:

$(this).find('[data-toggleable="true"]').addClass('hide');

This line targets all HTML elements with the data-toggleable attribute value as "true" and hides them. The advantage is that it won't redundantly apply the 'hide' class if it's already present on the element. Lastly, you can specifically display the section ID that needs to be visible:

$('#work').removeClass('hide');

Show divs in identical position when clicking

Answer №1

Answer №2

Similar questions

Tips for concealing overlay when the cursor hovers

Effortlessly refresh a data object in Vue.js without relying on a function

The session becomes obsolete when redirecting back to the previous page

Burger menu floating above container block element

Generating modal pages on the fly

Did I incorrectly associate the function with the button causing it to always be executed?

Is it possible to update the text within a button when hovering over it in Angular?

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

What is the best way to share specific links on LinkedIn articles?

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

What is the best way to display a button only during office hours from 9am to 5pm using React.js or JavaScript?

Managing numerous range sliders in a Django form

Determining the cursor location within a character in a div that is content editable using AngularJS

Creating dynamic buttons based on a list: A step-by-step guide

Troubleshooting CSS Display Problem on Chrome and Firefox

The Backbone.js template does not automatically inherit attributes from the model

Hover Effect for Instagram Feed (Web Application)

Ensure that the container div is filled by the image if the image exceeds the dimensions of

Is it feasible to transform HTML into EditorJS JSON format?

Customizing CSS for Internet Explorer browsers