CODEWITHSUNDEEP
javascripthtml
Ramsha Younis
Ramsha Younis

Reputation: 35

Change Div using Li in html or javascript

I want to display one div at a time and hide other . Need the same effect like:http://jsfiddle.net/cqDES/1552/

 <ul class="nav-sidebar">
  <li><a href="#">elem1</a></li>
  <li> <a href="#">elem2</a></li>
  <li> <a href="#">elem3</a></li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

Upvotes: 0

Views: 114

Answers (3)

vbrin27
vbrin27

Reputation: 991

I think this is what you are asking for.

JSFiddle

$(function() {
    var panels = $('div').hide();
    var tabs = $('.nav-sidebar li');
    tabs.click(function(orgEvent) {
      let clickedTabIndex = tabs.index(orgEvent.currentTarget);
       panels.each((index, panel)=>{
          $(panel)[index === clickedTabIndex ? "slideDown" : "slideUp"]();
       });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
  <li> <a href="#">elem1</a></li>
  <li> <a href="#">elem2</a></li>
  <li> <a href="#">elem3</a></li>
</ul>

<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

Upvotes: 1

Maestro
Maestro

Reputation: 865

You can use show()/hide() functions :

$(function() {    
    $('.nav-sidebar li').click(function() {
        var index = $(this).index() + 1;
        $('div:not(#div' + index + ')').hide();
        $('#div' + index).show();
    });
});
div[id^='div']
{
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
  <li><a href="#">elem1</a></li>
  <li> <a href="#">elem2</a></li>
  <li> <a href="#">elem3</a></li>
</ul>

<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

show function Documentation hide function Documentation

Upvotes: 1

Jacek Rojek
Jacek Rojek

Reputation: 1122

If you don't want sliding effect use show()/hide()

$(() => {
    $('div:not(#div0)').hide();
    $('.nav-sidebar li').click(function () {
      var index = $(this).index() + 1;
      $(`div:not(#div${index})`).hide();
      $(`#div${index}`).show();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
  <li><a href="#">elem1</a></li>
  <li> <a href="#">elem2</a></li>
  <li> <a href="#">elem3</a></li>
</ul>

<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

Upvotes: 1

Related Questions