Toggle the visibility of a div on and off by using navigation links with HTML5

After going through numerous posts, it's become apparent that my lack of experience with jQuery is causing me some challenges. There are many solutions similar to what I am trying to achieve.

Within a div, I have a vertical navigation bar consisting of buttons.

What I aim to do is have child divs inside that will be displayed or hidden depending on which navigation button the user clicks.

All these divs should occupy the same location on the screen, functioning like tabs but with vertical navigation.

I'm struggling to determine the best approach for showing and hiding each div when its respective button is clicked compared to another div.

Here's the HTML code for the Navigation:

<div id="lowerDetail">
    <div id="lowersectionmenu">
          <ul>
        <li><a href="#Notes" title="Notes">Notes</a></li>
        <li><a href="#People" title="People">People</a></li>
        <li><a href="#NextTab" title="Next Tab">Next Tab</a></li>
        <li><a href="#LastTab" title="LastTab">Last Tab/a></li>
          </ul>
    </div>

    <div id="Notes">
        <form>
        <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="100" />
        <button type="submit" class="noteEntryButton" id="sendNote" value="Submit" class="buttonAddNote">Submit Note</button>

        </form>

    </div>

    <div id="People">
        <form>
        <input type="text" name="addName" id="addName" placeholder="Name" size="35" />
        <input type="text" name="addPhone" id="addPhone" placeholde="XXX-XXX-XXXX" size="15" />

        </form>

    </div>

<div id="NextTab">Next Tab </div>
<div id="LastTab">Last Tab </div>

    </div>

Even though this setup is simple, here's the CSS related to it as well:

#lowersectionmenu {
    float:left;
    width: 120px;
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;
    margin: 10px;
}

#lowersectionmenu li a {
    height: 32px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
}   

#lowersectionmenu li a:link, #lowersectionmenu li a:visited {
    color: #5E7830;
    display: block;
    background: url(images/menu1.png);
    padding: 8px 0 0 10px;
}

#lowersectionmenu li a:hover {
    color: #26370A;
    background: url(images/menu1.png) 0 -32px;
    padding: 8px 0 0 10px;
}

#lowersectionmenu li a:active {
    color: #26370A;
    background: url(images/menu1.png) 0 -64px;
    padding: 8px 0 0 10px;
}
#lowersectionmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.noteEntryField {
    position:relative;
    top:20px;
}

.noteEntryButton {
    position:relative;
    top:20px;
    height:27px;
    outline:none;
    text-align:center;
    background: #66ff33;
    background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
    background: -moz-linear-gradient(top,  #66cc33,  #669933);
    font-size:14px;
    border-radius:4px;
    color:#606060;
    text-shadow:2px 2px 2px #f0f0f0;
}

Now all I need is the appropriate jQuery code to work its magic.

I welcome any assistance provided.

I've tried implementing the given jQuery code, but unfortunately, it's not working as expected. All divs remain visible, and the form fields are stacked on top of each other no matter what I try.

<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $('#lowersectionmenu a').click(function() {

            /* hide any previous active nav and remove activeClass, fails quietly if none found*/    
            $('.navActive').hide().removeClass('navActive');

            /* create ID selector from this link */
            var id = $(this).attr('href') /* or using native script   this.href*/
            /* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/

            /* show proper item and add active class used to find open element above*/
            $(id).show().addClass('navActive');

            return false; /* prevent browser default events for anchor tag */   

        });
        </script>

Answer №1

A solution that should be effective

$('#lowersectionmenu a').click(function() {

    /* Hiding any previously active nav element and removing activeClass, doing so quietly if none is found */
    $('.navActive').hide().removeClass('navActive');

    /* Creating an ID selector from this link */
    var id = $(this).attr('href') /* or using native script   this.href*/
    /* This will give back the string "#Notes" which perfectly matches the ID selector string for jQuery*/

    /* Displaying the appropriate item and adding an active class to find the open element above*/
    $(id).show().addClass('navActive');

    return false; /* Preventing default browser events for anchor tag */   

});

DEMO: http://jsfiddle.net/LzmuB/1/

The toggling of an active class is a widely used technique to quickly identify and deactivate the currently active item

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting PHP date format to JavaScript date format

I'm struggling to solve this problem $datetime = new Date().toLocaleString(); // returns current date in format 10/21/2021, 14:29:43 How can I generate the desired date format using JavaScript? The output should look like this: 2021-10-21 16:30:01 ...

Is it considered bad practice to have several Node.js "Apps" in a single server file?

Currently, I am managing two (soon to be three) node.js websocket apps using a single server.js file. To serve my page and a particle physics "game" that I created, I am utilizing express. Additionally, I plan on building a chatroom as a learning experienc ...

Arranging items by specific criteria in ng-repeat for a personalized sorting experience

Within my controller, I have an object named $scope.addresscards. The JavaScript code is provided below: var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.addresscards = { "work_address": { "location":"w ...

Using jQuery Events Post AJAX Load

I am facing an issue with dynamically adding events to hyperlinks using jQuery selectors... For example... $('a[data-toggle="email"]').click(function(){ //Do Something }); The problem arises when I have multiple div elements populated via ...

arranging a set of items alongside a corresponding tag

Here is an illustration of a scenario where a label precedes a list that is nested within a span. The objective is to have the list displayed next to the label rather than below it. Specifically, in this instance, the initial item in the list, "backups", s ...

How can you reach a Vue component from within another Vue component?

Layout.cshtml <div id="vuemainlayoutdiv"> <button v-on:click="onClick1()> Click 1 </button> <!--rendering File.html--> @RenderBody() </div> File1.cshtml <div id="AppcentralVue"> <button v- ...

Having issues deciphering JSON data in Perl

Trying to send JSON data using Ajax and Jquery to a Perl script, but having trouble reading the data back in Perl. Seeking assistance to identify any issues or missing elements in the code provided below. The Ajax call does not display the success or erro ...

execute an action in the controller with the help of JavaScript and refresh the view

My scenario involves having multiple selects such as brands and products. I aim to dynamically update the products options based on the brand selected by the user. The select element looks like this: <select asp-for="Product.BrandId" class=&qu ...

What is the solution for resolving the delay between a variable in HTML and the controller in Angular 4?

I am encountering a common issue in my Angular 4 or 2 project. Whenever I initialize a variable inside a subscribe function, there is a delay before it gets assigned a value. The problem arises when I try to use this variable in the HTML template using *ng ...

What is the best way to change the background color of a table cell in HTML and CSS?

Trying to adjust the background image of each data cell to a selected image has been challenging. Using the method displayed below, only the top left corner of the photo appears. The code snippet demonstrates setting the background of each data cell to th ...

Ways to import a library in JavaScript/TypeScript on a web browser?

I'm currently working on a project that involves a TypeScript file and an HTML page. Right now, I am loading the necessary libraries for the TypeScript file in the HTML Page using script tags like <script src="https://unpkg.com/<a href="/cd ...

Is there a way to use HTML to prevent the user from navigating away from the current page when submitting a form? Could jQuery, PHP, or a combination of

Is it achievable to send a message using PHP and keep the user on the same page after clicking "Send Message" button? Perhaps changing the submit button to a success message on the following page: . Can this task be accomplished with PHP and jQuery? ...

Unexpected Alert Triggered by XML Parsing Error

<script> async function loadData() { var data = await fetch("Product.xml"); var parsedData = await data.text(); var parser = new DOMParser(); var Product_document = parser.parseFromString(parsedData,"text/xml"); ...

The art of organizing dates and times

Need help with formatting a datetime that is retrieved from the database. The current format is as follows: 2012-06-11 21:39:54 I would like to display it in the format of June 11. Any suggestions on how this can be achieved? Thank you! ...

Angular's minimum date validation is not accurate for dates prior to the year 1901

Any assistance or clarification on this matter would be greatly appreciated. It appears that there may be an issue with my implementation, as otherwise it seems like a significant bug within Angular. Setup Create a form with a minimum date of 0001-01-01 ...

The expansion feature of PrimeNG Turbotable

I'm currently facing an issue with the Primeng Turbotable where I am unable to expand all rows by default. You can find a code example of my problem at this link. I have already tried implementing the solution provided in this example, but unfortuna ...

Modify the POST data in PHP 8 if the HTML form submit results in an empty submission

When passing data from a form, I encountered an issue where the data in the hidden input field is not being properly accessed in the $_POST array. <?php> $color = "yellow"; $value = 8; echo "<form name='Form' action='' method=& ...

observing the value of the parent controller from the UI router state's resolve function

I am facing an issue in my AngularJS application while using ui-router. There are three states set up - the parent state controller resolves a promise upon a successful request, and then executes the necessary code. In the child state portfolio.modal.pate ...

Using various alignment options for images on mobile devices

I've designed a theme with two columns, one for text and the other for images. I've structured it in HTML to display as: Text - Img Img - Text Text - Img Img - Text Text - Img Img - Text However, for mobile responsiveness, I want it to display ...

When using PrimeNG's InputOtp component, users are unable to modify the values of input fields

When using the p-inputOtp component from PrimeNG for OTP input, I've observed that changes can be made until three out of four boxes are filled. Once all four boxes are filled, modifying the input is no longer possible. Is there a way to enable change ...