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

Generating a JSON download link using AngularJS

I am looking to retrieve data from the Graph API JSON and gradually refine my search to achieve successful

Confirmation of numerous checkbox selections

Ways to insert HTML text into an external webpage's div element without using an iframe

Updating Angular JS views in real-time using database changes

Save information on users' Google accounts

The hide and show buttons seem to be missing when utilizing the datatable API

What is the best method for designing a filtering menu with a "Narrow By" option?

Searching patterns in Javascript code using regular expressions

Dealing with lag problems while feeding a massive dataset into the Autocomplete component of Material-UI

"Encountering errors during npm installation due to a failed preinstall

Encountering an error while attempting to launch an AngularJS application on Node.js? Let's

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

Set HTML form elements to be shown in 'display only' mode, without any interactivity

How can I position four DIV elements to the right of each other inside a parent DIV?

Incorporating ajax and jquery into html: Step-by-step guide

Implementing conditional button visibility in Angular based on user authorization levels

Navigate the user to various pages in a Node.js application based on login status

Control Over Fluid Grid Layouts