html div element on click getting appened

Question

I have a vertical menu where there are 5 items webdesign, mobile app etc., as shown below and when clicked on that it shows the respective href attribute.

<div class="col-md-3">  
        <ul class="nav nav-tabs nav-stacked">  
            <li class="active">  
            <a href="#web" onclick="webdesDiv()">Web Design and Development</a>   </li>     
            <li><a href="#mob" onclick="mobileDiv()">Mobile Applicaiton Development</a></li>  
            <li><a href="#ecom" onclick="ecommDiv()">eCommerce Solutions </a></li>   
            <li><a href="#soft" onclick="softDiv()">Software development</a></li>   
            <li><a href="#supp" onclick="supportDiv()">Support & Maintenance</a></li>   
        </ul>  
    </div>


    <div class="col-md-9" style="display:none;" id="webdesc">  
        <h4>This is how the webdesign  page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>

    </div>  
    <div class="col-md-9" style="display:none;" id="mobdesc">  
        <h4>This is how the mobile app section page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>      
    </div>

The problem is, when i click on Mobile application development, respective description is coming correctly, where as when i click on other option ex: ecommerce solutions, result is getting appended in same page. I need only that particular description rather than getting result appended. Kindly suggest fixes in my code .

My javascript code :

<script>
        function mobileDiv() 
        {
        document.getElementById('mobdesc').style.display = "block";
        }
        function webdesDiv() 
        {
        document.getElementById('webdesc').style.display = "block";
        }
</script>   

Answer 1

You need to hide the non-active div

If I were to code this in plain JS, I would not use hashes that go nowhere but make them useful. The following unobtrusively adds the event handlers to each link and use their hash to show/hide the repective div and to activate/deactivate the parent LI

window.onload = function() {
  var navLinks = document.querySelectorAll(".nav li a"); // get all nav links
  for (var i = 0; i < navLinks.length; i++) { // loop over them
    navLinks[i].onclick = function() { // assign click handlers
      var activeLink = document.querySelector(".nav > li.active > a"),
        activeDivId = activeLink.hash.substring(1),
        activeLI = activeLink.parentNode;
      document.getElementById(activeDivId).style.display = "none"; // hide active div
      activeLI.className = ""; // make LI non-active
      activeDivId = this.hash.substring(1); // find new div ID 
      document.getElementById(activeDivId).style.display = "block"; // show it
      this.parentNode.className = "active"; // activate the LI
      return false; // cancel the click
    }
  }
  document.querySelector(".nav > li.active > a").click(); // show active link
}

.active {
  background-color: yellow
}

<div class="col-md-3">
  <ul class="nav nav-tabs nav-stacked">
    <li class="active"><a href="#webdesc">Web Design and Development</a>
      <div class="col-md-9" style="display:none;" id="webdesc">
        <h4>This is how the webdesign  page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>
      </div>
    </li>
    <li><a href="#mobdesc">Mobile Application Development</a>
      <div class="col-md-9" style="display:none;" id="mobdesc">
        <h4>This is how the mobile app section page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>
      </div>
    </li>
  </ul>
</div>

jQuery if needed

$(function() {
  var $navLinks = $(".nav li a"); // get all nav links
  $navLinks.each(function() { // loop over them
    $(this).on("click", function(e) { // assign click handlers
      e.preventDefault();
      var $activeLink = $(".nav > li.active > a"),
          $activeLI = $activeLink.parent();
      $($activeLink.prop("hash")).hide(); // hide active div
      $activeLI.removeClass("active"); // make LI non-active
      $(this.hash).show(); // show it
      $(this).parent().addClass("active"); // activate the LI
    });
  });
  $(".nav > li.active > a").click(); // show active link
});

Answer 2

You need to add display:none for the blocks other than the one you clicked.

Your script should look something like this:

function mobileDiv() 
        {
          document.getElementById('mobdesc').style.display = "block";
          document.getElementById('webdesc').style.display = "none";
        }
        function webdesDiv() 
        {
          document.getElementById('webdesc').style.display = "block";
          document.getElementById('mobdesc').style.display = "none"
        }

<div class="col-md-3">  
        <ul class="nav nav-tabs nav-stacked">  
            <li class="active">  
            <a href="#web" onclick="webdesDiv()">Web Design and Development</a>   </li>     
            <li><a href="#mob" onclick="mobileDiv()">Mobile Applicaiton Development</a></li>  
            <li><a href="#ecom" onclick="ecommDiv()">eCommerce Solutions </a></li>   
            <li><a href="#soft" onclick="softDiv()">Software development</a></li>   
            <li><a href="#supp" onclick="supportDiv()">Support & Maintenance</a></li>   
        </ul>  
    </div>


    <div class="col-md-9" style="display:none;" id="webdesc">  
        <h4>This is how the webdesign  page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>

    </div>  
    <div class="col-md-9" style="display:none;" id="mobdesc">  
        <h4>This is how the mobile app section page looks like</h4>
        <p>Secure and highly interactive eCommerce storefront that is designed to leverage your product sales is developed using the latest coding techniques in the industry.</p>      
    </div>

Apply display:none to the blocks other than the one which is clicked.

A small suggestion: Since it looks like you're using bootstrap, use bootstrap navigation component - http://getbootstrap.com/components/#nav.

Answer 3

Try this Way :

<script>
    function mobileDiv() 
    {
        document.getElementById('mobdesc').style.display = "block";
        document.getElementById('webdesc').style.display = "none";
    }
    function webdesDiv() 
    {
        document.getElementById('webdesc').style.display = "block";
        document.getElementById('mobdesc').style.display = "none";
    }
 </script>

Make only one div to display:block and rest of other display:none