What is the best way to have a JavaScript div display automatically upon loading, but then be hidden when a different div link is clicked

Feel free to check out a sample of my page here: . My goal is to load the MEC div and then close it when clicking on another link, like Minimum Value Plans in the top bar. I experimented with setting it to "display:block" instead of "display:none", but unfortunately, this approach doesn't allow me to close it.

Displayed below is the JavaScript code that I am currently using:


lastone = 'empty';

function showIt(lyr) {
    if (lastone !== 'empty') lastone.style.display = 'none';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'block';
};

function hideIt(lyr) {
    if (lastone !== 'empty') lastone.style.display = 'block';
    lastone = document.getElementById(lyr);
    lastone.style.display = 'none';
}

Additionally, here is an example of the link code:


<a href="JavaScript:"showonlyone";" onClick="showIt('MEC')" class="homeheader">MEC Plans 

<div id="MEC" style="display:none;">
    <p class=textwhheader>MEC Plans enable employers to provide qualifying coverage to their employees on a self-funded basis, satisfying the individual mandate.
</p> 
<br>

    <a id='register'

                                class="btn red pure-button pure-button-primary"

                                style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;"

                                href='mecplans.html'

                                title="Click here to learn more.">

                                Learn More

                            </a>
                            </div>
javascriptjqueryhtmlcss

Answer №1

Since the link I provided earlier was not functioning properly, here is an alternative solution for you:

<ul>
    <li>
        <a id="first option" onClick="toggleDiv('myDiv1');">Option 1</a>
    </li>
    <li>
        <a id="first option" onClick="toggleDiv('myDiv2');">Option 2</a>
    </li>
</ul>
<div id="myDiv1">
    <span>Some data here</span>
</div>
<div id="myDiv2" style="display:none">
    <span>Div 2 data</span>
</div>

var currentActiveDiv = 'myDiv1';

toggleDiv = function(id){
    var domElement = document.getElementById(id);

    if (currentActiveDiv && currentActiveDiv !== id){
        var elementToHide = document.getElementById(currentActiveDiv);
        elementToHide.style.display = 'none';
    }

    domElement.style.display = 'block';
    currentActiveDiv = id;
};

Best Regards, David.

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

Retrieve the live value for plugin settings following the completion of DOM loading. (Fineuploader plugin)

I am seeking assistance with a situation. I am utilizing Fineuploader and I need to access and transmit the value of an input field (which will serve as the file group title). To achieve this, I am using the path to a server-side script (as I did not wri ...

javascriptjquerydomjquery-pluginsplugins

Response from a Clean jQuery Web Service

I've been seeing a lot of code examples calling web services that return JSON data, but they tend to involve back-end languages like PHP. Does anyone know of a tutorial for a jQuery-only solution? For example, setting up div tags with IDs, then direct ...

javascriptjqueryjson

What is the method for adding a shadow solely on the right side while concealing the bottom border?

After creating a navigation bar with bootstrap, I wanted to make the active tab stand out above the others. Here's what I achieved: https://i.sstatic.net/lmPz8.png Once I managed to connect the tabs with the content using a "before" class, everythin ...

javascripthtmlcssbootstrap-4

Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you. *I have successfully implemented thisDIV fadeIn() using "change" whenever ...

jqueryhtmlcssfadeout

Looking for regex to extract dynamic category items in node.js

Working on node.js with regex, I have accomplished the following tasks: Category 1.2 Category 1.3 and 1.4 Category 1.3 to 1.4 CATEGORY 1.3 The current regex is ((cat|Cat|CAT)(?:s\.|s|S|egory|EGORY|\.)?)(&#xA0;|\s)?((\w+)?([. ...

javascriptregexnode.js

How can a Bootstrap card be designed with the image positioned at the top left, but adjusting based on different

When it comes to Bootstrap 4 cards with images, most have the image positioned at the top using .card-img-top. But what if you want the image to be at the left or at the top depending on the width? Currently, I have two types of cards - one with the image ...

csstwitter-bootstrapresponsive-designbootstrap-4

How do the scopes of a controller and a directive's controller differ from each other?

Can you explain the difference between a controller and a directive's controller in terms of scope? I'm struggling to grasp the distinction and whether it's necessary to create controllers within the DDO for my directives. In the code snipp ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...

jqueryhtmlcssajax

Custom value in Field for radio type in Redux form

Can anyone help me figure out how to input text into a radio field using Redux form? Here are the fields I am working with: <Field name={some.name1} value={'text1'} component={renderRadioElement} type="radio" /> <Field name= ...

javascriptreactjsreduxredux-form

React's createRef() versus callback refs: Which one provides the ultimate edge in performance?

Lately, I've delved into React and grasped the concept of refs for accessing DOM nodes. The React documentation discusses two methods of creating Refs. Could you elaborate on when a callback ref is preferable to createRef()? Personally, I find createR ...

javascriptreactjs

Reorganizing the select box with jQuery causes issues in IE 8 where clicking on it subsequently scrolls the select box

For reordering a multiple select box using jQuery, I have the following code: function moveUpItem () { $('#intCategoryID option:selected').each( function () { $(this).insertBefore($(this).prev()); }); } This pa ...

jqueryselectinternet-explorer-8

Combining AJAX with the MVC architecture in C# programming

My experience with AJAX is limited, and I am not very familiar with JavaScript either. I have a page (Product Browser) that is structured as follows: Navigation (First, Prev, 1, 2, 3 Next, Last) - requires full page refresh Items per Page drop down - I ...

jqueryasp.net-mvcajax

Creating a unique diagonal background in a React Native / Expo app

I'm creating a calendar feature for our application that displays availability. For days that have both check-ins and check-outs, happening at 12:00PM, I want to represent the day as half green and half pink, like this: https://i.sstatic.net/s97x7.pn ...

javascriptreact-nativeexpo

Which protocols can be used in hrefs within the HTMLEditorKit class of Swing?

I am currently using a unique application called AppWorx that allows the input of documentation for scheduled jobs in HTML format. Recently, I have been working on creating on-call documentation that includes a link formatted like this: <a href="tel:+ ...

javahtmlswingprotocolshtmleditorkit

What is the best way to modify or refresh the information within the <p> tag for each new client request

Here is the code I have written: if(data.country_name == 'India'){ $('.fact').append("<h2 id='india'>Fact about India</h2>"); $('.fact').append("<p>The world's highes ...

javascripthtmljqueryweb

Initiate a basic GET command

I am looking for a way to send a basic GET request to my server, but I have run into an issue with the x-requested-with header that is sent by .ajax. Unfortunately, my server does not understand this header. $.ajax({ ...

jqueryajaxgetrequest

The issue of a malfunctioning react TypeScript map when used in conjunction with useContext

I am attempting to retrieve data from the TVMaze API using React, TypeScript, and useContext. Although I can display the data, the useContext does not update with the return value, so when I use the map function, nothing is displayed. Any advice on how to ...

javascriptreactjstypescriptfetchreact-hooks

Using jQuery to show each letter individually with a delay

I attempted to split all the letters and display them one by one using a timeout. I came across some solutions, but they don't seem to work for me. With this script, it adds a complete layer (word) but skips over each loop. The message is a string th ...

jqueryeachletter

Angular, learn how to dynamically display or conceal elements based on the #bookmark in the URL

I am working on an HTML page that includes multiple sections. The main section contains links to the other sections, structured as follows: <a href="#sec1"></a>. Additionally, each section has a <a href="#"></a> link to return to ...

javascripthtmlangularsingle-page-application

I am experiencing difficulties in generating a React application using "create-react-app"

Here is the error message from the console: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04676b7661296e7744362a322a35">[protected email]</a> postinstall G:\mernbootcamp\testfront\my-app\node ...

javascriptnode.jsreactjsmern