CSS-based tabs (also Javascript if necessary)

Question

I have an HTML like the below format:

<div class="parent1">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
<div class="parent2">
  Content here
</div>

Where Child 1/2/3 are tabs. Upon clicking one, the content will get active and a class active is added there.

I want to make the parent2 class visible (display block) only if Child 2 is active. I have tried some CSS which are not working.

Is there any possible script available for that?

Thank you.

A purely CSS based solution will only work if you merge parent1 and 2. — connexo, Apr 02 '18 at 17:40
Hi Madet, I have tried the parent selector css. .parent1 < .child1 + .parent2{ display: block;} But not working. — Jitendra Mishra, Apr 02 '18 at 17:48
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — connexo, Apr 02 '18 at 18:08
Added a CSS only solution that requires restructuring your HTML. The tabs and the content need to share the same parent element. — connexo, Apr 02 '18 at 18:11

score 0 · Answer 1 · answered Apr 02 '18 at 17:37

0

In Jquery,

$(".child2").hasClass("active")?($(".parent2").css("display","block")):($(".parent2").css("display","none"))

answered Apr 02 '18 at 17:37

anuragb26

838
6
11

You would need to add it to the event handler...like this $(".child2").click(function(){ $(this).hasClass("active")?($(".parent2").css("display","block")):($(".parent2").css("display","none")) )} – anuragb26 Apr 02 '18 at 18:25
the above code would go inside the $(document).ready(function(){ }); – anuragb26 Apr 02 '18 at 18:27

Damian Peralta · Answer 2 · 2018-04-02T18:43:37.050

0

There are several ways to do it, you can try with jQuery show() and hide() , check here:

UPDATE: Using display block

You can do this:

//Register click listener:
$(".child2").click(function() {
//Check if the class is added 
  if($(".child2").hasClass("active")){
   //Set display block
    $('.parent2').css('display', 'block')
  }
});

Both css('display', 'block') and show() will work

edited Apr 02 '18 at 18:43

answered Apr 02 '18 at 17:39

Damian Peralta

1,696
5
11

Hi Damien, This is not working. I think it is because those are not buttons. and click function is not working there – Jitendra Mishra Apr 02 '18 at 18:25
It doesn't matter if they are buttons or not, you can add a listener to a div, using jQuery click() method: https://api.jquery.com/click/ – Damian Peralta Apr 02 '18 at 18:29

connexo · Answer 3 · 2018-04-02T20:01:51.273

This is a purely CSS-based tabs implementation:

.parent {
  font-size: 0;
}

input[type=radio] {
  display: none;
}

input[type=radio]+label {
  border: 4px solid #f0f0f0;
  display: inline-block;
  font-size: 16px;
  padding: 10px;
  min-width: 100px;
  text-align: center;
  transition: all .2s ease;
}

input[type=radio]:checked+label {
  background-color: #a00;
  color: #fff;
}

.tab-content {
  background-color: #f0f0f0;
  position: absolute;
  height: 500px;
  width: 500px;
  opacity: 0;
  transition: all .3s ease-in-out;
  font-size: 16px;
  padding: 15px;
}

input[type=radio]:checked ~.tab-content {
  transition: all .6s ease-in-out .2s;
}

#tab1:checked~.tab1 {
  opacity: 1;
}

#tab2:checked~.tab2 {
  opacity: 1;
}

#tab3:checked~.tab3 {
  opacity: 1;
}

<div class="parent">
  <input type="radio" name="tabs" id="tab1" checked><label for="tab1">Tab 1</label>
  <input type="radio" name="tabs" id="tab2"><label for="tab2">Tab 2</label>
  <input type="radio" name="tabs" id="tab3"><label for="tab3">Tab 3</label>
  <div class="tab-content tab1">Content for Tab 1...</div>
  <div class="tab-content tab2">... here's content for Tab 2, ...</div>
  <div class="tab-content tab3">... and, last but not least, here's Tab 3 content.</div>
</div>

score 0 · Answer 4 · answered Apr 02 '18 at 18:28

A javascript onclick function will work for this.

    <style>.nodisplay{display: none;}</style>
    <div class="parent1">
        <div id='child1' onclick='show(this)' data-id='parent2' class="child1">Parent2</div>
        <div id='child2' onclick='show(this)' data-id='parent3' class="child2">Parent3</div>
        <div id='child3' onclick='show(this)' data-id='parent4' class="child3">Parent4</div>
    </div>
    <div id='parent2' class='nodisplay'>
      Content here
    </div>
    <div id='parent3' class='nodisplay'>
      Content here
    </div>
    <div id='parent4' class='nodisplay'>
      Content here
    </div>

    <script>
    function show(div) {
    var id1 = div.getAttribute('data-id');
     var x = document.getElementById(id1);
      if (x.style.display === "block") {
         x.style.display = "none";
         } else {
         x.style.display = "block";
      }
     }
    </script>

First I set the display of parents 2, 3, & 4 to none with CSS. next I add an onclick function to each child div and specify the data I want my script to pick up.

Then in my function; it will either collect 'parent2', parent3', or 'parent4' depending on which div was clicked, then assigns it the variable of id1. Next I create a variable 'x' to toggle between showing the div or not.

I hope this helps you understand using javascript to manipulate CSS a little better. Have a great day.

CSS-based tabs (also Javascript if necessary)

4 Answers4