Html - Hide all elements when the one element is visible

Kinga
February 27, 2024
132 views
1 vote
2 Answers

‘Hi, when i click on "a" element i wanna show only one div (other div’s supposed to be hide).
Now when i click on "box1", .dayone is showed, next… when i click on "box2" i see .dayone and .daytwo.’

function openInfo1() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 1) {
    document.querySelector(".dayone").style.display = "flex";
  }
}

function openInfo2() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 2) {
    document.querySelector(".daytwo").style.display = "flex";
  }
}

function openInfo3() {
  const currentTime = new Date()
  const day = currentTime.getDate()
  if (day > 3) {
    document.querySelector(".daythree").style.display = "flex";
  }
}

.dayone,
.daytwo,
.daythree {
  display: none;
}

<div class="txtelem">
  <div class="dayone">1</div>
  <div class="daytwo">2</div>
  <div class="daythree">3</div>
</div>
<div class="boxelem">
  <a class="box1" onclick="openInfo1()">
    <img class="nb1" src="//placehold.co/50" />
  </a>
  <a class="box2" onclick="openInfo2()">
    <img class="nb2" src="//placehold.co/51" />
  </a>
  <a class="box3" onclick="openInfo3()">
    <img class="nb3" src="//placehold.co/52" />
  </a>
</div>

Answers

I suggest you delegate and simplify the classes

I removed the dat code since that does not seem to be what you actually want. The links would not work if the day is not what is expected and that would be weird UX. I can add them back if you need

window.addEventListener('DOMContentLoaded', () => { // when elements are available on the page
  const boxContainer = document.querySelector('.boxelem');
  const images = boxContainer.querySelectorAll('.nb')
  const divs = document.querySelectorAll('.txtelem .day')
  boxContainer.addEventListener('click', (e) => {
    const tgt = e.target.closest('a.box');
    if (!tgt) return; // not a box link
    // const day = new Date().getDate(); // this will get 1 to 31 - if you want day (sun-sat) use getDay() which will return 0 to 6
    // but you do not seem to want to use days, but instead use the links
    const whatDiv = tgt.dataset.target;
    const image = tgt.querySelector('img');
    divs.forEach((div,i) => {
      div.hidden = div.id !== whatDiv; // hide what does not match the clicked data-target
      images[i].classList.toggle('active', images[i] === image);
    }); 
  });
});

.nb { border: 1px solid white; }
.nb.active { border: 1px solid black; }

<div class="txtelem">
  <div class="day" id="dayone">1</div>
  <div class="day" id="daytwo" hidden>2</div>
  <div class="day" id="daythree" hidden>3</div>
</div>
<div class="boxelem">
  <a href="#" class="box" data-target="dayone"><img 
    class="nb active" src="https://placehold.co/50x50?text=Day+One" /></a>
  <a href="#" class="box" data-target="daytwo"><img 
    class="nb" src="https://placehold.co/50x50?text=Day+Two" /></a>
  <a href="#" class="box" data-target="daythree"><img 
    class="nb" src="https://placehold.co/50x50?text=Day+Three" /></a>
</div>

You could try using jQuery for this

HTML

<div class="txtelem">
  <div class="dayone">1</div>
  <div class="daytwo">2</div>
  <div class="daythree">3</div>
</div>
<div class="boxelem">
  <a id="btn-1" class="box1" href="#">
    <img class="nb1" src="//placehold.co/50" />
  </a>
  <a id="btn-2" class="box2" href="#">
    <img class="nb2" src="//placehold.co/51" />
  </a>
  <a id="btn-3" class="box3" href="#">
    <img class="nb3" src="//placehold.co/52" />
  </a>
</div>

jQuery

$(document).ready(function() {
    
      $('#btn-1').click(function() {
        //each time when button 1 is pressed we check if any of the 
        //other element is visible in the ui, if visible we set its 
        //display option to none
        removeVisibility();
        const currentTime = new Date()
        const day = currentTime.getDate()
        var hClass = $('.dayone').hasClass('visible')
        //if it does not contain the .visible class that means the 
        //element is not visible in the ui, so we set this first
        if (!hClass) {
          $('.dayone').addClass('visible');
          if (day > 1) {
            document.querySelector(".dayone.visible").style.display = "flex";
          }
        }
      });
    
    
      <!--//btn-2 part-->
    
      $('#btn-2').click(function() {
        removeVisibility();
        const currentTime = new Date()
        const day = currentTime.getDate()
        var hClass = $('.daytwo').hasClass('visible')
        if (!hClass) {
          $('.daytwo').addClass('visible');
          if (day > 2) {
            document.querySelector(".daytwo.visible").style.display = "flex";
          }
        }
      });
    
      <!--btn-3-->
    
      $('#btn-3').click(function() {
        removeVisibility();
        const currentTime = new Date()
        const day = currentTime.getDate()
        var hClass = $('.daythree').hasClass('visible')
        if (!hClass) {
          $('.daythree').addClass('visible');
          if (day > 1) {
            document.querySelector(".daythree.visible").style.display = "flex";
    
          }
        }
      });
    });
    
    //method to set display css property to none
    //we will check if any of the elements that contains .visible class
    //is visible in the UI and if so we set this to none
    function removeVisibility() {
      if ($('.visible').is(':visible')) {
        $('.visible').removeClass('visible').css('display', 'none');
      }
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Hide all elements when the one element is visible

Answers