When clicking on the HTML div element, it will be appended to the application

Question

When clicking on the HTML div element, it will be appended to the application

Within my vertical menu, there are 5 items including web design and mobile app. When clicked on these items, they reveal their respective href attributes as shown below.

<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 Application 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>View our Web Design page here</h4>
        <p>Discover a secure and interactive eCommerce storefront that boosts your product sales through cutting-edge coding techniques.</p>

    </div>
    <div class="col-md-9" style="display:none;" id="mobdesc">
        <h4>Explore our Mobile App section here</h4>
        <p>Experience a secure and interactive eCommerce storefront that enhances your product sales using top-tier coding methods in the industry.</p>
    </div>

An issue arises when clicking on options like ecommerce solutions, as the result gets appended to the current page instead of displaying only the specific description. How can I rectify this behavior? Any suggestions for fixing my code?

Below is my JavaScript code:

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

javascript html css

Answer 1

Answer №1

Consider this Approach :

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

Set one div to display:block and hide the others using display:none

Answer 2

Consider this Approach :

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

Set one div to display:block and hide the others using display:none

Answer 3

Answer №2

To hide the blocks other than the one you clicked on, you can simply add display:none in your script. Here's an example:

function showOnlySelectedDivs() 
        {
          document.getElementById('selectedDiv').style.display = "block";
          document.getElementById('otherDiv1').style.display = "none";
          document.getElementById('otherDiv2').style.display = "none";
        }

<div class="col-md-3">  
        <ul class="nav nav-tabs nav-stacked">  
            <li class="active">  
            <a href="#" onclick="showOnlySelectedDivs()">Display Selected Div</a>   </li>     
        </ul>  
    </div>


    <div class="col-md-9" style="display:none;" id="selectedDiv">  
        <h4>This is the selected div content</h4>
        <p>Here is some information about the selected content.</p>

    </div>  
    <div class="col-md-9" style="display:none;" id="otherDiv1">  
        <h4>This is another hidden div</h4>
        <p>Some additional information goes here.</p>      
    </div>

Remember to apply display:none to all blocks except the one that is clicked.

A helpful tip: If you're using bootstrap, consider utilizing the built-in navigation component for better organization - http://getbootstrap.com/components/#nav.

Answer 4

To hide the blocks other than the one you clicked on, you can simply add display:none in your script. Here's an example:

function showOnlySelectedDivs() 
        {
          document.getElementById('selectedDiv').style.display = "block";
          document.getElementById('otherDiv1').style.display = "none";
          document.getElementById('otherDiv2').style.display = "none";
        }

<div class="col-md-3">  
        <ul class="nav nav-tabs nav-stacked">  
            <li class="active">  
            <a href="#" onclick="showOnlySelectedDivs()">Display Selected Div</a>   </li>     
        </ul>  
    </div>


    <div class="col-md-9" style="display:none;" id="selectedDiv">  
        <h4>This is the selected div content</h4>
        <p>Here is some information about the selected content.</p>

    </div>  
    <div class="col-md-9" style="display:none;" id="otherDiv1">  
        <h4>This is another hidden div</h4>
        <p>Some additional information goes here.</p>      
    </div>

Remember to apply display:none to all blocks except the one that is clicked.

A helpful tip: If you're using bootstrap, consider utilizing the built-in navigation component for better organization - http://getbootstrap.com/components/#nav.

Answer 5

Answer №3

To conceal the inactive division, follow these steps:

When coding in vanilla JavaScript, it is best to utilize hashes that serve a purpose rather than leading nowhere. The code snippet below seamlessly attaches event handlers to each link, utilizing their hash values to toggle the display of the corresponding div and to activate or deactivate the parent LI element.

window.onload = function() {
  var navLinks = document.querySelectorAll(".nav li a"); // fetch all nav links
  for (var i = 0; i < navLinks.length; i++) { // iterate 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 inactive
      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>

If jQuery is required:

$(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 6

To conceal the inactive division, follow these steps:

When coding in vanilla JavaScript, it is best to utilize hashes that serve a purpose rather than leading nowhere. The code snippet below seamlessly attaches event handlers to each link, utilizing their hash values to toggle the display of the corresponding div and to activate or deactivate the parent LI element.

window.onload = function() {
  var navLinks = document.querySelectorAll(".nav li a"); // fetch all nav links
  for (var i = 0; i < navLinks.length; i++) { // iterate 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 inactive
      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>

If jQuery is required:

$(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
});

When clicking on the HTML div element, it will be appended to the application

Answer №1

Answer №2

Answer №3

Similar questions

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

I'm having trouble getting my placeholder to display correctly in react-native-datepicker. What could be the issue?

What is the method for accessing the locale and messages of the IntlProvider within a component?

Implementing an active class in a React render method

tips for incorporating staticfiles processing into css files on django

Optimal approach for blending release and debug code in a web application

Having trouble implementing a custom font family in a React Native Text component

When attempting to render a React child, it is important to note that objects are not valid (found: [object Promise]). If your intention was to display a collection of children, it is advised

Storing the entire HTML5 game on the local device for faster loading and

Try utilizing a variety of background hues for uib progressbars

express.js creating dynamic URLs causing confusion

Picking Layers on Google Maps with Three.js

Retrieving the nth character from a given string

Tips for crafting a successful form success message within a bootstrap modal

Issue with Bootstrap 5 spinner's lack of motion in Firefox browser

How can you change the alignment of items from vertical to horizontal using Bootstrap?

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?

Experience a seamless front/back DIV transition with a mouseover effect similar to the ones on USAT

Error: The addDoc() function in FireBase was encountered with invalid data, as it included an unsupported field value of undefined during the execution

"Declare the Status, Refresh the Page, and Specify the Web