1

I'm trying to hide multiple <div> elements and when someone hover on a <li> item respective <div> to be display. So I have used a boostrap container and then had a row inside it and then row divided into <div class="col-2"> and <div class="col-10> where all <li> items to be in <div class="col-2"> and hidden <div>s to be <dic class="col-10">. So this is my code

 #divli01,#divli02,#divli03,#divli04,#divli05{
            display: none;
        }
        #li01:hover +#divli01{
            color: red;
            display: block;
        }
        #li02:hover +#divli02{
            color: red;
            display: block;
        }
        #li03:hover +#divli03{
            color: red;
            display: block;
        }
        #li04:hover +#divli04{
            color: red;
            display: block;
        }
        #li05:hover +#divli05{
            color: red;
            display: block;
        }
   
   
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
   <div class="row">
    <div class="col-2">
    <ul>
        <li id="li01">A</li>
        <li id="li02">B</li>
        <li id="li03">C</li>
        <li id="li04">D</li>
        <li id="li05">E</li>
        
    </ul>
    
    </div>
    <div class="col-10">
        
    <div id="divli01">
       <p> A section goes here</p>
         <p> A section goes here</p>
         <p> A section goes here</p>
         <p> A section goes here</p>
    </div>
    
    <div id="divli02">
       <p> B section goes here</p>
         <p> B section goes here</p>
         <p> B section goes here</p>
         <p> B section goes here</p>
    </div>
    
    <div id="divli03">
       <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
    </div>
    
    <div id="divli04">
       <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
    </div>
       <div id="divli05">
       <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
    </div>
    
    </div>
        </div>
        </div>

Initially I have hide all the <div> with css display:none and then Iam trying to show each div when user hover on a <li> item. But I think I have missed something. So could anyone please help on this.

Nipun Tharuksha
  • 2,496
  • 4
  • 17
  • 40
  • 2
    From your HTML structure, I do not think it is possible to do that without JavaScript, because you cannot properly select the `div` elements. `+` is adjacent sibling selector, which will not work here. –  Sep 15 '19 at 04:39
  • @njras if possible could you please submit sample code – Nipun Tharuksha Sep 15 '19 at 04:42

3 Answers3

2

I have added a class to ul element to select li elements easily, you can choose any other method as well.

let li = document.querySelectorAll('.unhover li');

function displayDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'block';
  document.getElementById('div' + event.target.id).style.color = 'red';
}

function hideDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'none';

}

li.forEach(item => {
  item.addEventListener('mouseenter', displayDiv);
  item.addEventListener('mouseleave', hideDiv);
});
#divli01,
#divli02,
#divli03,
#divli04,
#divli05 {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-2">
      <ul class="unhover">
        <li id="li01">A</li>
        <li id="li02">B</li>
        <li id="li03">C</li>
        <li id="li04">D</li>
        <li id="li05">E</li>

      </ul>

    </div>
    <div class="col-10" id="divs">

      <div id="divli01">
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
      </div>

      <div id="divli02">
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
      </div>

      <div id="divli03">
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
      </div>

      <div id="divli04">
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
      </div>
      <div id="divli05">
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
      </div>

    </div>
  </div>
</div>
1

If you don't want to use Javascript, then you'll need to change the html structure to be able to use CSS for that task. You can do this by nesting your col-2 & col-10 divs inside the <li> element. Then using css u can set:

li:hover .col-10 {display: block}

If you don't want to change html structure, then you'll use Javascript to add event listeners to <li> elements ('mouseenter' & 'mouseleave') so that you can add/remove a class to the corresponding div on mouse enter/leave

Adam Moussa
  • 51
  • 1
  • 2
1

You can also do this using jQuery.

Here is the link of codepen. It's something similar that you want...

[https://codepen.io/multanisadik/pen/jjvrqq]

Please review it. if it's helpful for you.

Sadik Multani
  • 131
  • 6