0

I'm looking for a way to show one div and hide all the other ones. With the 1st one being displayed by default.

I was able to achieve this using jQuery but the code is quite lengthy and I feel like there's a better/more optimized way to go about this.

Here's the snippet:

$(".link-one").click(function() {
  $(".div-one").show();
  $(".div-two,.div-three,.div-four,.div-five").hide();
 
});
$(".link-two").click(function() {
  $(".div-two").show();
  $(".div-one,.div-three,.div-four,.div-five").hide();
});
$(".link-three").click(function() {
  $(".div-three").show();
  $(".div-one,.div-two,.div-four,.div-five").hide();
});
$(".link-four").click(function() {
  $(".div-four").show();
  $(".div-one,.div-two,.div-three,.div-five").hide();
});
$(".link-five").click(function() {
  $(".div-five").show();
  $(".div-one,.dive-two,.div-three,.div-four").hide();
});
.div-two,
.div-three,
.div-four,
.div-five {
  display: none
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">
  Div #1
</div>

<div class="div-two">
  Div #2
</div>

<div class="div-three">
  Div #3
</div>

<div class="div-four">
  Div #4
</div>

<div class="div-five">
  Div #5
</div>

And here's a JSfiddle that should help showcase what I mean: https://jsfiddle.net/z58ayhtw/6/

3
  • 2
    In the future, please include all code relevant to the question, in the question itself. Preferably as a minimal reproducible example. Dont make us go off site to find important information.
    – Jon P
    Apr 10, 2019 at 1:49
  • 1
    Hey, @Kaptain ! Welcome to StackOverflow. So, if you change your terms to 'add a class' (which could 'hide' it) - and remove that class for any others... - you'll find that this is a question we all end up with at some point. - and there are hundreds of posts of this. - so, yours will probably be flagged and removed. Even I asked it - 7 years ago. stackoverflow.com/questions/13816730/… . :) Apr 10, 2019 at 1:50
  • Id usually use Vue for this nowadays --- but maybe I'd do it like this if I was going use straight JS: jsfiddle.net/sheriffderek/62retf7g Apr 10, 2019 at 2:36

7 Answers 7

3

Use common classes to target both. Adding a simple data attribute on the links can be used to isolate respective content element

$('.tab-link').click(function(){
   var contClass = $(this).data('div');
   $('.content').hide().filter('.' + contClass).show()
})
.content {
  display: none
}
.content:first-of-type {display:block}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="tab-link" data-div="div-one">Link One</a> 
<a href="#" class="tab-link" data-div="div-two">Link Two</a> 
<a href="#" class="tab-link" data-div="div-three">Link Three</a> 
<a href="#" class="tab-link" data-div="div-four">Link Four</a> 
<a href="#" class="tab-link" data-div="div-five">Link Five</a>

<div class="div-one content">
  Div #1
</div>

<div class="div-two  content">
  Div #2
</div>

<div class="div-three content">
  Div #3
</div>

<div class="div-four content">
  Div #4
</div>

<div class="div-five content">
  Div #5
</div>

1

Of course there is.

One approach is to capture the event.target and compare while looping through the entire set of elements. Your way to compare can be anything; a class, maybe an id, an attribute, an index.

I will be doing this with native JS, but it should be a piece of cake to convert to jQuery.

window.onload = function(){
  const links = document.querySelectorAll('.link-item');
  const divs = document.querySelectorAll('.div-item');

  const hide = function(evt){
    divs.forEach(function(d){
       if(evt.target.getAttribute('itemNo') != d.getAttribute('itemNo')) d.classList.add('display-none');
       else d.classList.remove('display-none');
    });
  }

  links.forEach(function(d){ d.onclick = hide; })
}
.display-none{
   display: none;
}
<div class="link-item" itemNo="1">link 1</div>
<div class="link-item" itemNo="2">link 2</div>
<div class="link-item" itemNo="3">link 3</div>
<div class="link-item" itemNo="4">link 4</div>
<div class="link-item" itemNo="5">link 5</div>
<br/><br/>
<div class="div-item" itemNo="1">div 1</div>
<div class="div-item display-none" itemNo="2">div 2</div>
<div class="div-item display-none" itemNo="3">div 3</div>
<div class="div-item display-none" itemNo="4">div 4</div>
<div class="div-item display-none" itemNo="5">div 5</div>

2
  • This is great, but I still need the links to be displayed at all time. With only the divs being hidden unless revealed.
    – Kaptain
    Apr 10, 2019 at 1:44
  • @Kaptain Ah. I didn't look at your demo. My mistake. I'll modify this Apr 10, 2019 at 1:44
1

Add css

<style>
    #divs>div{
        visibility: hidden;
    }
    #divs>div.visible{
        visibility: visible;
    }
</style>

Then pass the reference of the div to the click function

<div id="divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<a href="javascript:showDiv(1)">Show 1</a>
<a href="javascript:showDiv(2)">Show 2</a>
<a href="javascript:showDiv(3)">Show 3</a>
<a href="javascript:showDiv(4)">Show 4</a>
<a href="javascript:showDiv(5)">Show 5</a>

This is the vanila JS

<script>

    function showDiv(n) {
        const divs = document.querySelectorAll("#divs>div")
        divs.forEach(d => {
            d.classList.remove("visible")
        })
        divs.item(n-1).classList.add("visible")
    }

</script>
0
0

You can do that in following steps:

  • Add click event on a elements whose class start with link. Use Attribute Selectors for that.For example $('a[class^=link]') will get all the <a> whose class starts with link.
  • Then get the class of the element with starts with link
  • Hide all the divs first and then show the desired one.

$('a[class^=link]').click(function(e){
  let c = this.className.split(' ').find(x => x.startsWith('link'));      
  $('div[class^=div]').hide();   
  $(`.div-${c.split('-')[1]}`).show();
})
.div-two,.div-three,.div-four,.div-five {
  display:none
}

a {
  display:inline-block;
  margin-right:10px;
  padding:5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">
Div #1
</div>

<div class="div-two">
Div #2
</div>

<div class="div-three">
Div #3
</div>

<div class="div-four">
Div #4
</div>

<div class="div-five">
Div #5
</div>

Note: Using different class here doesnot make sense to me. The class of the elements should be same. And ids should be div-one,div-two...

0

You can make use of the .index() of the clicked anchor element along with .eq() and .not() like the following way:

$('a[class^=link-]').click(function(){
  var pos = $(this).index() - 1;
  $('[class^=div-]').eq(pos).show();
  $('[class^=div-]').not(':eq('+pos+')').hide();
});
.div-two,.div-three,.div-four,.div-five {
  display:none
}

a {
  display:inline-block;
  margin-right:10px;
  padding:5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="link-one">Link One</a> <a href="#" class="link-two">Link Two</a> <a href="#" class="link-three">Link Three</a> <a href="#" class="link-four">Link Four</a> <a href="#" class="link-five">Link Five</a>

<div class="div-one">Div #1</div>
<div class="div-two">Div #2</div>
<div class="div-three">Div #3</div>
<div class="div-four">Div #4</div>
<div class="div-five">Div #5</div>

0

You are linking to items on the page. Use this to your advantage, give the targets Ids and set the href of the links to that. This is a more semantic approach and may have some SEO benefits.

The other change I have made is to enclose the content divs in a container and based the styling off that

$('.tab-link').click(function() {
  //Get our target from the link
  var contTarget = $(this).attr('href');
  //Hide all content
  $('.content > div').hide();
  //Show the target
  $(contTarget).show();
})
.content>div {
  display: none
}

.content>div:first-child {
  display: block
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#div-one" class="tab-link">Link One</a>
<a href="#div-two" class="tab-link">Link Two</a>
<a href="#div-three" class="tab-link">Link Three</a>
<a href="#div-four" class="tab-link">Link Four</a>
<a href="#div-five" class="tab-link">Link Five</a>

<div class="content">
  <div id="div-one">
    Div #1
  </div>

  <div id="div-two">
    Div #2
  </div>

  <div id="div-three">
    Div #3
  </div>

  <div id="div-four">
    Div #4
  </div>

  <div id="div-five">
    Div #5
  </div>
</div>

This is also possible with pure CSS but it is no where near as universal as a javascript option. It works best when the content area is a known size.

A rough outline on how to do this is below.

.content { position: relative;}

.content>div {
  display: none;
  position:absolute;
  background-color:#FFF;
  z-index:10;
}

.content>div:first-child {
  display: block;
  z-index:1;
}

.content > div:target {
  display:block;
}

a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#div-one" class="tab-link">Link One</a>
<a href="#div-two" class="tab-link">Link Two</a>
<a href="#div-three" class="tab-link">Link Three</a>
<a href="#div-four" class="tab-link">Link Four</a>
<a href="#div-five" class="tab-link">Link Five</a>

<div class="content">
  <div id="div-one">
    Div #1
  </div>

  <div id="div-two">
    Div #2
  </div>

  <div id="div-three">
    Div #3
  </div>

  <div id="div-four">
    Div #4
  </div>

  <div id="div-five">
    Div #5
  </div>
</div>

0

Jquery version

Add this css

<style>
    #divs>div{
        display: none;
    }
</style>

Build you html

<div id="divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<div id="links">
    <a href="#">Show 1</a>
    <a href="#">Show 2</a>
    <a href="#">Show 3</a>
    <a href="#">Show 4</a>
    <a href="#">Show 5</a>
</div>

And finally the js

<script>
    const $links = $("#links>a");
    const $divs = $("#divs>div");

    $links.on("click", function(){
        const i = $links.index(this)
        $divs.hide()
        $($divs[i]).show()
    })
</script>

Not the answer you're looking for? Browse other questions tagged or ask your own question.