Display a particular div upon clicking a specific link, while concealing the other divs

Question

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with.

My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either 'Filmmaking' or 'Beme', 'Details 2 or 3 should be displayed while the previous one disappears.

I've managed to set everything up correctly so far, but I just need to figure out how to ensure that clicking on another link displays the corresponding 'Details' text.

Your assistance is greatly appreciated, and I currently have it all set up on a fiddle!

http://jsfiddle.net/t1huc43d/

Here is the code that requires adjustment:

$(function() {
   $("togglediv1").click(function() {
      $("#togglediv1").removeClass("display-start");
      $("li").removeClass("display");
      $(this).addClass("display");
   });
});

javascript jquery html css

Answer 1

Answer №1

This piece of code is incredibly efficient and will undoubtedly save you a significant amount of time. By incorporating a custom attribute known as "data," the link is seamlessly connected to the tab that needs to be displayed. This coding gem simplifies the process of adding extra tabs, making your task easier and more streamlined. For detailed changes in the HTML and JavaScript, refer to the lower section.

<div id="wrap">

<ul id="divtoggle">
    <li><a class="link" data="1">Vlogging</a></li>
    <li><a class="link" data="2"> Filmmaking</a></li>
    <li><a class="link" data="3"> Beme</a></li>
</ul>


<div class="text">
    <div class="tab" data="1">Details 1</div>
    <div class="tab" data="2">Details 2</div>
    <div class="tab" data="3">Details 3</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
  $(".link").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    dataAttr = $(this).attr("data");
    $(".tab").hide();
    $(".tab[data="+dataAttr+"]").show();
  });
  $(".link:first").click();
});
</script>

Answer 2

This piece of code is incredibly efficient and will undoubtedly save you a significant amount of time. By incorporating a custom attribute known as "data," the link is seamlessly connected to the tab that needs to be displayed. This coding gem simplifies the process of adding extra tabs, making your task easier and more streamlined. For detailed changes in the HTML and JavaScript, refer to the lower section.

<div id="wrap">

<ul id="divtoggle">
    <li><a class="link" data="1">Vlogging</a></li>
    <li><a class="link" data="2"> Filmmaking</a></li>
    <li><a class="link" data="3"> Beme</a></li>
</ul>


<div class="text">
    <div class="tab" data="1">Details 1</div>
    <div class="tab" data="2">Details 2</div>
    <div class="tab" data="3">Details 3</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
  $(".link").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    dataAttr = $(this).attr("data");
    $(".tab").hide();
    $(".tab[data="+dataAttr+"]").show();
  });
  $(".link:first").click();
});
</script>

Answer 3

Answer №2

$(function() {
   $("#togglediv1").click(function() {
      $("#one").removeClass("display");
      $("#one").addClass("display-start");
      $("#two").removeClass("display-start");
      $("#two").addClass("display");
      $("#three").removeClass("display-start");
      $("#three").addClass("display");
   });
});

$(function() {
   $("#togglediv2").click(function() {
      $("#one").removeClass("display-start");
      $("#one").addClass("display");
      $("#two").removeClass("display");
      $("#two").addClass("display-start");
      $("#three").addClass("display");
      $("#three").removeClass("display-start");
   });
});

...

Answer 4

$(function() {
   $("#togglediv1").click(function() {
      $("#one").removeClass("display");
      $("#one").addClass("display-start");
      $("#two").removeClass("display-start");
      $("#two").addClass("display");
      $("#three").removeClass("display-start");
      $("#three").addClass("display");
   });
});

$(function() {
   $("#togglediv2").click(function() {
      $("#one").removeClass("display-start");
      $("#one").addClass("display");
      $("#two").removeClass("display");
      $("#two").addClass("display-start");
      $("#three").addClass("display");
      $("#three").removeClass("display-start");
   });
});

...

Answer 5

Answer №3

Check out the updated jsfiddle here: http://jsfiddle.net/t1huc43d/3/

To better track which elements are clicked, I made use of the this keyword to identify the corresponding details.

Here's the revised javascript:

$(function() {
   $("li").click(function() {
      $("#togglediv1").removeClass("active-start");
      $("li").removeClass("active");
      $(this).addClass("active");
      let temp = $("#divtoggle").children();
            var index;

      for (let i = 0; i < temp.length; i++)
      {
        if (this == temp[i] )
        {
            index = i;
          break;
        }
      }

      $(".display-start").addClass("display");
      $(".display-start").removeClass("display-start");

          let text_children = $(".text").children()
      let the_child = text_children[index];
            $(text_children[index]).addClass("display-start");
      $(text_children[index]).removeClass("display");
   });
});

Answer 6

Check out the updated jsfiddle here: http://jsfiddle.net/t1huc43d/3/

To better track which elements are clicked, I made use of the this keyword to identify the corresponding details.

Here's the revised javascript:

$(function() {
   $("li").click(function() {
      $("#togglediv1").removeClass("active-start");
      $("li").removeClass("active");
      $(this).addClass("active");
      let temp = $("#divtoggle").children();
            var index;

      for (let i = 0; i < temp.length; i++)
      {
        if (this == temp[i] )
        {
            index = i;
          break;
        }
      }

      $(".display-start").addClass("display");
      $(".display-start").removeClass("display-start");

          let text_children = $(".text").children()
      let the_child = text_children[index];
            $(text_children[index]).addClass("display-start");
      $(text_children[index]).removeClass("display");
   });
});

Answer 7

Answer №4

If you're looking for a simple and efficient way to achieve this using jQuery, here's what I recommend:

Start by assigning a unique id to each title element, incrementing them sequentially. Repeat the same process for the corresponding detail elements, like this:

<div id="wrap">
    <ul id="divtoggle">
        <li><a class="title" id="title-1">Vlogging</a></li>
        <li><a class="title" id="title-2"> Filmmaking</a></li>
        <li><a class="title" id="title-3"> Beme</a></li>
    </ul>

    <div class="text">
        <div class='display' id="detail-1">Details 1</div>
        <div class='display' id="detail-2">Details 2</div>
        <div class='display' id="detail-3">Details 3</div>
    </div>
</div>

Next, implement the jQuery functionality. Attach a click event handler to the title class. Upon clicking a title, extract its id and use it to display the related detail:

$(document).ready(function() {

   $(".title").click(function() {

     //*** get id
     var id = $(this).attr("id").split("-")[1];
     if (typeof id != "undefined") {

       //*** hide other descriptions and show yours
       $(".display").hide();
       $("#detail-" + id).show();
     }

   });

});

Check out the live demo here

Answer 8

If you're looking for a simple and efficient way to achieve this using jQuery, here's what I recommend:

Start by assigning a unique id to each title element, incrementing them sequentially. Repeat the same process for the corresponding detail elements, like this:

<div id="wrap">
    <ul id="divtoggle">
        <li><a class="title" id="title-1">Vlogging</a></li>
        <li><a class="title" id="title-2"> Filmmaking</a></li>
        <li><a class="title" id="title-3"> Beme</a></li>
    </ul>

    <div class="text">
        <div class='display' id="detail-1">Details 1</div>
        <div class='display' id="detail-2">Details 2</div>
        <div class='display' id="detail-3">Details 3</div>
    </div>
</div>

Next, implement the jQuery functionality. Attach a click event handler to the title class. Upon clicking a title, extract its id and use it to display the related detail:

$(document).ready(function() {

   $(".title").click(function() {

     //*** get id
     var id = $(this).attr("id").split("-")[1];
     if (typeof id != "undefined") {

       //*** hide other descriptions and show yours
       $(".display").hide();
       $("#detail-" + id).show();
     }

   });

});

Check out the live demo here

Answer 9

Answer №5

Presenting a simplified version of your CSS setup. The code now toggles between an .active class for the top links and a .display class for the text divs. Upon clicking a link, the code utilizes the $.index() function to determine which text box should be displayed based on the index of the clicked link. For example, clicking on the 2nd link will reveal the content from the 2nd text box.

$(function() {
   $toggleLinks = $('#divtoggle a'),
   $displays = $('.text div');
   
   $toggleLinks.on('click', function(e) {
     e.preventDefault();
     $toggleLinks.removeClass('active');
     $(this).addClass('active');
     $displays.removeClass('display');
     $displays.eq($(this).closest('li').index()).addClass('display');
   });
});

li {
  color: grey;
  font: effra;
  font-weight: bold;
}

a:hover {
  color: #aaaaaa;
  cursor: pointer;
}

.active {
  color: orange;
}

.text div {
  display: none;
}

.text .display {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">

  <ul id="divtoggle">
    <li><a class="active">Vlogging</a></li>
    <li><a>Filmmaking</a></li>
    <li><a>Beme</a></li>
  </ul>

  <div class="text">
    <div class='display'>Details 1</div>
    <div>Details 2</div>
    <div>Details 3</div>
  </div>

</div>

Answer 10

Presenting a simplified version of your CSS setup. The code now toggles between an .active class for the top links and a .display class for the text divs. Upon clicking a link, the code utilizes the $.index() function to determine which text box should be displayed based on the index of the clicked link. For example, clicking on the 2nd link will reveal the content from the 2nd text box.

$(function() {
   $toggleLinks = $('#divtoggle a'),
   $displays = $('.text div');
   
   $toggleLinks.on('click', function(e) {
     e.preventDefault();
     $toggleLinks.removeClass('active');
     $(this).addClass('active');
     $displays.removeClass('display');
     $displays.eq($(this).closest('li').index()).addClass('display');
   });
});

li {
  color: grey;
  font: effra;
  font-weight: bold;
}

a:hover {
  color: #aaaaaa;
  cursor: pointer;
}

.active {
  color: orange;
}

.text div {
  display: none;
}

.text .display {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">

  <ul id="divtoggle">
    <li><a class="active">Vlogging</a></li>
    <li><a>Filmmaking</a></li>
    <li><a>Beme</a></li>
  </ul>

  <div class="text">
    <div class='display'>Details 1</div>
    <div>Details 2</div>
    <div>Details 3</div>
  </div>

</div>

Answer 11

Answer №6

Retained as much of the original code while making necessary updates. View updated fiddle here.

I introduced a new custom attribute called data-controls to link each li element with its corresponding data div:

<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li>
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li>
<li data-controls="three"><a id="togglediv3"> Beme</a></li>

Subsequently, I made adjustments to the JavaScript to handle the removal and addition of classes based on requirements.

Answer 12

Retained as much of the original code while making necessary updates. View updated fiddle here.

I introduced a new custom attribute called data-controls to link each li element with its corresponding data div:

<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li>
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li>
<li data-controls="three"><a id="togglediv3"> Beme</a></li>

Subsequently, I made adjustments to the JavaScript to handle the removal and addition of classes based on requirements.

Display a particular div upon clicking a specific link, while concealing the other divs

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

merge various useState functions for appending values to an array into a unified function in a React component

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

Addressing a jquery.ajax relative path problem

Optimizing CSS for printing with margins and overflow

Is it possible for Java Applets to interact with external sources with user consent?

Guide on implementing automatic callbacks with AJAX

Unable to import global CSS in React; however, local components are working fine

Height adjustment for flexbox children

Rearrange the entire div container by simply dragging and dropping it. (Shift the Pop-up Modal dialog box)

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

Angular 2 template can randomly display elements by shuffling the object of objects

Chrome: Box-shadow not visible on images with a background present

What is the best way to eliminate the underline text decoration from a link element?

Reveal the inner workings of functions within the Vuex Plugin

extracting data from json using javascript

What is the method to retrieve the string value from a JavaScript String object?

What could be causing my images to appear incomplete when using a background image with the style property?

How can jQuery select an element by its id attribute by referencing the href attribute of a different element?

What is the process for deploying a next.js application with a custom express backend to a VPS or Heroku platform?

I need help with formatting a div to look like this