CODEWITHSUNDEEP
javascript
Nomathamsanqa Philiso
Nomathamsanqa Philiso

Reputation: 73

show div content when a link is clicked

when i click on the link the content is not displayed i need help i am not good with javascript and jquery any help will be highly appreciated as i am stuck here

$(document).ready(function() {
  $('.nav-collapse sidebar-nav ul li:first').addClass('active');
  $('.tab-content').hide();
  $('.nav-collapse sidebar-nav ul li submenu.a').click(function(event) {
    event.preventDefault();
    var cont = $(this).attr('href');
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    $(cont).show();
    $(cont).siblings('.tab-content').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav-collapse sidebar-nav">
  <ul>
    <li>
      <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> ACSA</span><span class="label label-important"> 3 </span></a>
      <ul>
        <li>
          <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CABINETS</span><span class="label label-important"> 1 </span></a>
          <ul>
            <li>
              <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CORE</span><span class="label label-important"> 2 </span></a>
              <ul>

                <li><a class="submenu" href="#cabinet1"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 1</span></a>
                </li>
                <li><a class="submenu" href="#cabinet2"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 2</span></a>
                </li>

              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div id="content">
  <div id="cabinet1" class="tab-content">
    <div class="wrap">
      <h5>CABINET 1  core A</h5>
      <div class="gauges">
        <h1> Cabinet 1  Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Voltage </h1>
      </div>
    </div>
  </div>
</div>

the code is not complete but when you click on the link it does not display the content on the div tab-content

Upvotes: 2

Views: 59

Answers (3)

PYovchevski
PYovchevski

Reputation: 115

<div class="nav-collapse sidebar-nav">
    <ul>
        <li>
            <a class="dropmenu" href="#">
                <i class="icon-folder-close-alt"></i>
                <span class="hidden-tablet"> ACSA</span>
                <span class="label label-important"> 3 </span>
            </a>
            <ul>
                <li>
                    <a class="dropmenu" href="#">
                        <i class="icon-folder-close-alt"></i>
                        <span class="hidden-tablet"> CABINETS</span>
                        <span class="label label-important"> 1 </span>
                    </a>
                    <ul>
                        <li>
                            <a class="dropmenu" href="#">
                                <i class="icon-folder-close-alt"></i>
                                <span class="hidden-tablet"> CORE</span>
                                <span class="label label-important"> 2 </span>
                            </a>
                            <ul>
                                <li>
                                    <a class="submenu" href="#cabinet1">
                                        <i class="icon-file-alt"></i>
                                        <span class="hidden-tablet"> Cabinet 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="submenu" href="#cabinet2">
                                        <i class="icon-file-alt"></i>
                                        <span class="hidden-tablet"> Cabinet 2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div id="content">
    <div id="cabinet1" class="tab-content">
        <div class="wrap">
            <h5>CABINET 1  core A</h5>
            <div class="gauges">
                <h1> Cabinet 1  Core A Power usage</h1>
                <p>Power</p>

            </div>
            <div class="gauges">
                <h1> Cabinet 1 core A Current </h1>
            </div>
            <div class="gauges">
                <h1> Cabinet 1 core A Voltage </h1>
            </div>
        </div>
    </div>

    <div id="cabinet2" class="tab-content">
        <div class="wrap">
            <h5>CABINET 2 core A</h5>
            <div class="gauges">
                <h1> Cabinet 2  Core A Power usage</h1>
                <p>Power</p>

            </div>
            <div class="gauges">
                <h1> Cabinet 2 core A Current </h1>
            </div>
            <div class="gauges">
                <h1> Cabinet 2 core A Voltage </h1>
            </div>
        </div>
    </div>
</div>

AND CSS

    $(document).ready(function() {
  $('.nav-collapse.sidebar-nav ul li:first').addClass('active');
  $('.tab-content').hide();
  $('.nav-collapse.sidebar-nav ul li a.submenu').click(function(event) {
    event.preventDefault();
    var cont = $(this).attr('href');
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    $(cont).show();
    $(cont).siblings('.tab-content').hide();
  });
});

Upvotes: 0

Michael Mano
Michael Mano

Reputation: 3440

So I tidied it up a bit but from the code you should be able to follow whats going on.

Basically on document ready you were making the divs hidden. this was also causing issues on click, and the Targeting via CSS and Hrefs was a bit off so I set that up with data- attribute

Let me know if any questions. see it working here http://codepen.io/unifx/pen/rrowZz

$(document).ready(function () {
    $('ul.dropmenu li:first').addClass('active');

    $('ul.submenu li a').click( function(){
      var i = $(this).attr('data-content');
      $('.tab-content').removeClass('show');
      $('#cabinet'+i).addClass('show');
    });
});

CSS

.hidden {
  display: none;
}
.show {
  display: block;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav-collapse sidebar-nav">
  <ul class="dropmenu">
    <li>
      <a class="" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> ACSA</span><span class="label label-important"> 3 </span></a>
      <ul>
        <li>
          <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CABINETS</span><span class="label label-important"> 1 </span></a>
          <ul class="submenu">
            <li>
              <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CORE</span><span class="label label-important"> 2 </span></a>
              <ul>

                <li><a class="submenu" href="#" data-content="1"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 1</span></a>
                </li>
                <li><a class="submenu" href="#" data-content="2"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 2</span></a>
                </li>

              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div id="content">
  <div id="cabinet1" class="tab-content hidden">
    <div class="wrap">
      <h5>CABINET 1  core A</h5>
      <div class="gauges">
        <h1> Cabinet 1  Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Voltage </h1>
      </div>
    </div>
  </div>
  <div id="cabinet2" class="tab-content hidden">
    <div class="wrap">
      <h5>CABINET 2 core A</h5>
      <div class="gauges">
        <h1> Cabinet 2 Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 2 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 2 core A Voltage </h1>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Telman
Telman

Reputation: 1477

Try to modify your selector to this one:

$('.nav-collapse.sidebar-nav ul li a.submenu')
  1. I removed a space between the .nav-collapse.sidebar-nav classes since they are at the same level.
  2. I reordered a.submenu selector, since . means a class and it should be near the submenu instead of a element

Upvotes: 2

Related Questions