simplified code - toggle section visibility

Question

simplified code - toggle section visibility

$(".link1").click(function(){
 $(".slide2, .slide3, .slide4, .slide5").css("opacity", 0.0);
$(".slide1").fadeTo("slow", 1.0);
  });
  $(".link2").click(function(){
 $(".slide1, .slide3, .slide4, .slide5").css("opacity", 0.0);
$(".slide2").fadeTo("slow", 1.0);
  });
  $(".link3").click(function(){
 $(".slide2, .slide1, .slide4, .slide5").css("opacity", 0.0);
$(".slide3").fadeTo("slow", 1.0);
  });
  $(".link4").click(function(){
 $(".slide2, .slide3, .slide1, .slide5").css("opacity", 0.0);
$(".slide4").fadeTo("slow", 1.0);
  });
  $(".link5").click(function(){
 $(".slide2, .slide3, .slide4, .slide1").css("opacity", 0.0);
$(".slide5").fadeTo("slow", 1.0);
  });

.slide1, .slide2, .slide3, .slide4, .slide5 {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  width: 50vw;
  height: 50vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  opacity: 0;
}

.link1, .link2, .link3, .link4, .link5 {
  width: 100px;
  height: 100px;
  margin-right: 133px;
  margin-left: 2px;
  padding-left: 0px;
}
.thumbWrapper{
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  padding-bottom: 0px;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <div class="thumbWrapper">
      <div><a href="#" class="link1"><img src="https://images.unsplash.com/photo-1578491133524-f33d9c7a7484?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w... 
    </div>
</p>

<p>I will have 40 different thumbs and 40 large images that are placed all on absolute with their opacity set to zero.
On thumb click, the image should fade in. I started some code for just 5 links but I feel like there must be a shorter way to do this for my 40 links... Any ideas?</p>

<p>Thank you!!!</p>

<p>I have written this so far:</p>

<p><div>
<div>
<pre class="lang-js"><code><script>
$(".link2").click(function(){
 $(".slide11, .slide1, .slide3, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide2").fadeTo("slow", 1.0);
  });
  $(".link1").click(function(){
 $(".slide2, .slide1, .slide3, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide11").fadeTo("slow", 1.0);
  });
  $(".link3").click(function(){
 $(".slide11, .slide1, .slide2, .slide44, .slide55, .slide66").css("opacity", 0.0);
$(".slide3").fadeTo("slow", 1.0);
  });
  $(".link4").click(function(){
 $(".slide11, .slide1, .slide3, .slide2, .slide55, .slide66").css("opacity", 0.0);
$(".slide44").fadeTo("slow", 1.0);
  });
  $(".link5").click(function(){
 $(".slide11, .slide1, .slide3, .slide44, .slide2, .slide66").css("opacity", 0.0);
$(".slide55").fadeTo("slow", 1.0);
  });
  </script>

javascript html css

Answer 1

Answer №1

To implement this functionality, you should add the click event listener to the parent element containing your links, for example:

<div id="thumbs-container">
    // place links with IDs like link1, link2 here
</div>

Make sure that your links and slides have consistent IDs and classes, respectively. For instance, #link4 corresponds to .slide4. Here's how you can accomplish this:

var LINK_PREFIX = "link";
var SLIDE_CLASS_PREFIX = ".slide";

var totalSlides = 40;
var slides = [];

for (var slideNum = 1; slideNum <= totalSlides;  slideNum++) {
    slides.push(SLIDE_CLASS_PREFIX + slideNum);
}

var container = document.getElementById("thumbs-container");

container.addEventListener('click', (event) => {
    var targetId = event.target.id;

    if (targetId.indexOf(LINK_PREFIX) === -1) return; // optional check: not clicked on any link
    var slideNum = targetId.replace(LINK_PREFIX, "");

    var slideToFadeIn = SLIDE_CLASS_PREFIX + slideNum;
    var slidesToHide = slides.filter(slide => slide !== slideToFadeIn);

    $(slidesToHide.join(", ")).css("opacity", 0.0);
    $(slideToFadeIn).fadeTo("slow", 1.0);
});

Answer 2

To implement this functionality, you should add the click event listener to the parent element containing your links, for example:

<div id="thumbs-container">
    // place links with IDs like link1, link2 here
</div>

Make sure that your links and slides have consistent IDs and classes, respectively. For instance, #link4 corresponds to .slide4. Here's how you can accomplish this:

var LINK_PREFIX = "link";
var SLIDE_CLASS_PREFIX = ".slide";

var totalSlides = 40;
var slides = [];

for (var slideNum = 1; slideNum <= totalSlides;  slideNum++) {
    slides.push(SLIDE_CLASS_PREFIX + slideNum);
}

var container = document.getElementById("thumbs-container");

container.addEventListener('click', (event) => {
    var targetId = event.target.id;

    if (targetId.indexOf(LINK_PREFIX) === -1) return; // optional check: not clicked on any link
    var slideNum = targetId.replace(LINK_PREFIX, "");

    var slideToFadeIn = SLIDE_CLASS_PREFIX + slideNum;
    var slidesToHide = slides.filter(slide => slide !== slideToFadeIn);

    $(slidesToHide.join(", ")).css("opacity", 0.0);
    $(slideToFadeIn).fadeTo("slow", 1.0);
});

Answer 3

Answer №2

If you want to improve your approach, I recommend being more assertive in your coding style. Take a look at the example below, which provides two different perspectives on how to tackle the animation.

var element = document.getElementById('disp')
element.addEventListener('click', function(event) {
  document.querySelectorAll('.showOne div.active')
          .forEach( el => el.classList.remove('active'))
  event.target.classList.add('active')
})

.showOne div {
  opacity: 30%;
  transition: opacity 500ms;
}
.showOne div:hover {
  animation: anim-fade 1s ease;
  color: green;
}
.showOne div.active {
  color: red;
  opacity: 100%;
}

@keyframes anim-fade {
  0% {
    opacity: 30%;
  }
  100% {
    opacity: 100%;
  }
}

<div id="disp" class="showOne">
  <div> AAAA </div>
  <div> BBBB </div>
  <div> CCCC </div>
  <div> DDDD </div>
</div>

Answer 4

If you want to improve your approach, I recommend being more assertive in your coding style. Take a look at the example below, which provides two different perspectives on how to tackle the animation.

var element = document.getElementById('disp')
element.addEventListener('click', function(event) {
  document.querySelectorAll('.showOne div.active')
          .forEach( el => el.classList.remove('active'))
  event.target.classList.add('active')
})

.showOne div {
  opacity: 30%;
  transition: opacity 500ms;
}
.showOne div:hover {
  animation: anim-fade 1s ease;
  color: green;
}
.showOne div.active {
  color: red;
  opacity: 100%;
}

@keyframes anim-fade {
  0% {
    opacity: 30%;
  }
  100% {
    opacity: 100%;
  }
}

<div id="disp" class="showOne">
  <div> AAAA </div>
  <div> BBBB </div>
  <div> CCCC </div>
  <div> DDDD </div>
</div>

Answer 5

Answer №3

A single click event can be used to identify the parent element of the clicked item, determine its position among its siblings within the grandparent element, and then show the specific item while hiding the rest:

$(".thumbWrapper > div > a").click(function() {
    var parent = this.parentNode;
    $(".slide" + ([...parent.parentNode.children].indexOf(parent) + 1)).fadeTo("slow", 1.0).siblings().css("opacity", 0.0);
})

Answer 6

A single click event can be used to identify the parent element of the clicked item, determine its position among its siblings within the grandparent element, and then show the specific item while hiding the rest:

$(".thumbWrapper > div > a").click(function() {
    var parent = this.parentNode;
    $(".slide" + ([...parent.parentNode.children].indexOf(parent) + 1)).fadeTo("slow", 1.0).siblings().css("opacity", 0.0);
})

Answer 7

Answer №4

A different method to achieve the same result is outlined below:

// To demonstrate, let's create 40 images and add them to the DOM:
var i = 1;
while (i < 41) {
  var sliderEl = document.createElement("img"); 
  sliderEl.setAttribute('class','slider'); 
  sliderEl.setAttribute('src','https://via.placeholder.com/200x60.png?text=demoIMG'+i);
  sliderEl.addEventListener('click', showImg); // this will trigger on click
  document.body.appendChild(sliderEl); 
  ++i;
}

// The function below executes when an image is clicked:
function showImg() {
  var sliders = document.querySelectorAll('.slider');
  for (var i=0; i < sliders.length; i++) {
    sliders[i].removeAttribute('style');
  }
  this.setAttribute('style', 'position: fixed; top: calc(50vh - 100px); left: calc(50vw - 100px); transform: scale(2,2);');
};

.slider {display: block; border: 1px solid black; margin: 20px;}

This approach offers a faster way to configure and control elements. Happy coding!

Answer 8

A different method to achieve the same result is outlined below:

// To demonstrate, let's create 40 images and add them to the DOM:
var i = 1;
while (i < 41) {
  var sliderEl = document.createElement("img"); 
  sliderEl.setAttribute('class','slider'); 
  sliderEl.setAttribute('src','https://via.placeholder.com/200x60.png?text=demoIMG'+i);
  sliderEl.addEventListener('click', showImg); // this will trigger on click
  document.body.appendChild(sliderEl); 
  ++i;
}

// The function below executes when an image is clicked:
function showImg() {
  var sliders = document.querySelectorAll('.slider');
  for (var i=0; i < sliders.length; i++) {
    sliders[i].removeAttribute('style');
  }
  this.setAttribute('style', 'position: fixed; top: calc(50vh - 100px); left: calc(50vw - 100px); transform: scale(2,2);');
};

.slider {display: block; border: 1px solid black; margin: 20px;}

This approach offers a faster way to configure and control elements. Happy coding!

simplified code - toggle section visibility

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a self-chaining function in JavaScript: A guide

Updating an individual item from an array of objects using ReactJS

Using AngularJS to send the $http response back to the calling object

Automatically save checked checkboxes in localStorage

Invalidating the express response object due to a TypeError issue

Sending JSON Data with Javascript Post Request

When trying to create a MongoStore object, an error occurred because the property 'create' was not defined

How to use TypeScript to filter an array based on the values of another array

What is the best way to retrieve a Promise from a store.dispatch within Redux-saga in order to wait for it to resolve before rendering in SSR?

Using `require(variable)` is not functional in next-js environment

The slide experiences overflow as it continuously slides up and down

The logo on my header is being covered by the menu due to the CSS code

Adjusting Size Dynamically for Tooltips Based on Content Length

Rendering HTML or links sourced from encoded JSON data with JavaScript

How about mixing up your backgrounds with an overlay effect for a unique look?

Utilizing Azure SDK to send an email

The page keeps refreshing repeatedly

Modify the properties of an element based on another

Ensuring Bootstrap 3 Table Header Widths Remain Fixed

Just starting out in the world of CSS - mastering text arrangement and styling