Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load.

Buttons:

<button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divone">One</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divetwo">Two</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divthree">Three</button>

Divs:

<div id="divone" class="collapse">Div one content here</div> <div id="divetwo" class="collapse">Div two content here</div> <div id="divthree" class="collapse">Div three content here</div>
javascriptcsshtml

Answer №1

Here's a simple solution for you. By keeping your classes and HTML markup intact, you can add this custom CSS style to ensure the element is always displayed. Then, use jQuery to dynamically toggle this class based on user interaction.

.unhide{
        display: block !important;
    }

After importing jQuery, utilize this concise script to handle click events:

<script type="text/javascript">
    $(".btn").click(function(){
        $('.collapse').removeClass('unhide');
        $($(this).data("target")).addClass('unhide');
    })
</script>

To break down the process, when a button is clicked, we remove the "force to display" class first before targeting and adding it to the specified element. (note the double money signs)

If desired, feel free to get more inventive with the naming conventions of your classes!

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

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

I've been working on a project to fetch the most recent 50 tweets with a specific hash tag. The project is built for mobile devices using PhoneGap (0.9.6) and jQuery (1.6.1). Below is my code: function retrieveTweets(hash, numOfResults) { var uri ...

javascriptjqueryjsoncordova

What is the best way to retrieve a JSP parameter dynamically or how can one create a JSP parameter on the

Currently learning JSP and ajax simultaneously. In the process of creating a dynamic tab that can be added or removed using these steps. Looking to pass parameters from controller to the content area of the newly added tab. 1. When clicking on the &apos ...

javascriptjqueryajaxjsp

Dividing the logic from the Express router while retaining the ability to utilize Express functionalities

As I embark on my journey of developing my first app using Node.js and Express, I have noticed that my router file is starting to get overcrowded with logic. It seems like there is too much going on in there. My solution to this issue is to pass a functio ...

javascriptnode.jsexpressmodel-view-controller

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

javascriptcsshtml

Unexpected outcomes when trying to sort and paginate React-Table

Experiencing unexpected results with react-table integration for pagination and sorting. Merged examples from the react-table repository. Encountering an issue where table hooks reset the page index on re-render, causing fetchData to be called twice during ...

javascriptreactjsreact-table

Is it better to specify one root element or render the entire layout in ReactDOM.render()?

Currently in the process of learning React.js and I have a question. Is it more beneficial to keep my ReactDOM.render() as it is currently set up: ReactDOM.render( <div className="container"> <div className="row"> <div className ...

javascriptreactjs

Can you please tell me the CSS pseudo element that corresponds to the AM/PM field in an <input type="time">

The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...

javascripthtmlcss

The translation feature in React does not seem to be functioning properly with SASS

After trying various display settings like flex and block without success, I realized that the transform property was not working as expected. Despite centering elements successfully using other methods, the transform doesn't seem to have any effect o ...

htmlcssreactjssass

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css

Creating a unique kendo ui widget from scratch

Is there a way to create a custom widget that functions similarly to the example shown in this sample: http://jsfiddle.net/anilca/u2HF7/ I found some helpful information here, but I'm struggling with defining dropdownlist templates and linking them ...

javascriptjquerykendo-uicustom-controls

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?

Check out the fiddle I've created: http://jsfiddle.net/dkarasinski/dj2nqy9c/1/ This is the basic code. I need assistance with a functionality where clicking on a black box opens a black background and then after 500ms a red box appears. I want the ...

javascriptjqueryhtmlcss

The value of an AngularJS service is not being reflected in the view

I have implemented the stateProvider in my code, and I am facing an issue with updating the breadcrumbs in the header when the state changes. Instead of creating embedded views for each state, I have a service that shares an array of breadcrumbs containing ...

javascriptangularjsangularjs-scopeangular-ui-routerangularjs-service

Calculating the mean value of the numbers provided in the input

I'm struggling with calculating the average of numbers entered through a prompt window. I want to display the numbers as I've done so far, but combining them to find the average is proving difficult. Here's the code I have: <html> &l ...

javascriptloopsaverage

Can loading data after the initial page load improve the performance of web page loading?

Is it beneficial to load non-essential data using AJAX immediately after the page loads in order to speed up overall webpage loading time? There are certain modules on my website that are not crucial, so I am currently waiting for the basic content to loa ...

javascriptjqueryajaxtimeloading

Troubleshooting: JavaScript Bookmarklet Fails to Execute on Certain Websites

Recently, I created a unique bookmarklet that functions flawlessly on some websites, but unfortunately fails to work on others. Interestingly, even when it doesn't work, the script is still added to the bottom of the page; however, only a portion of t ...

javascriptjquerybookmarklet

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

javascripthtmliosobjective-cuiwebview

Utilize ng-repeat to display a series of images, with the first image being placed within a unique div

My challenge lies in displaying product images using ng-repeat, where one image is located in a separate div. Let me share my code and explain what is happening. The API response provides product details and images [{"id_product":"1000","name":"Nikolaus ...

javascripthtmlangularjs

How to use multiple template urls in Angular 6

Currently, I am creating a front-end using Angular 6 and facing the challenge of having components with varying html structures based on the user who is logged in. The number of templates required can range from 2 to over 20, so my preference would be to ...

javascriptangulartypescript

Utilizing a jQuery plugin or function with customizable options when adding elements dynamically

jQuery offers a useful feature where you can use $(document).on(...) to apply an event to newly added elements in the HTML, such as after an Ajax request. Can you provide an example of how to use this with a custom function/plugin like hoverpulse? Anothe ...

javascriptjqueryajaxjquery-plugins

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...

javascriptjqueryhtmlcss