Display/hide the entire div element

I am currently working on a project with 2 divs, where I want to display only one div at a time and hide the other. For example, if div 1 is visible, then div 2 should be hidden. You can check out what I have done so far in this demo.

Everything is working as expected except that both divs are visible when the page loads. My goal is to hide div 1 initially and have div 2 visible first. Can anyone suggest how I can achieve this?

<div class="container">
  <div class="row">
    <div class="col-6 card-body targetDiv" id="div1">
      <div class="form-group pt-4">

        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">

        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <a class="btn btn-secondary showSingle" target="2" title="Add Reference"><i class="fas fa-ellipsis-v"></i></a>
    </div>

    <div class="col-6 card-body targetDiv" id="div2">
      <div class="form-group pt-4">

        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <a class="btn btn-secondary showSingle" target="1" title="Add Reference"><i class="fas fa-file"></i></a>
    </div>

  </div>
javascriptcssbootstrap-4

Answer №1

To effectively customize the appearance of your "div1" component, include a style block within it;

Here is an example:

<div class="col-6 card-body targetDiv" id="div1" style="display:none;">

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

What could be causing the if statement to evaluate as false even though the div's style.display is set to 'block'?

Building a react application using createreactapp and encountering an issue with an if statement that checks the CSS display property of a div identified as step1: const step1 = document.getElementById("step-1") if (step1.style.display === 'blo ...

javascripthtmlcssreactjs

Currently, I am developing a Vue.js chat application. I am facing a challenge when it comes to sending the entire input div along with the keyboard popping up on Android devices. How can I achieve this

I'm in the process of developing a chat application using vuejs that will be accessed through a webview on Android. I currently have an input-bx element for sending messages, but I need to find a way to ensure it remains visible when the Android keybo ...

javascriptvue.jsvuejs2chat

Can you recommend a straightforward method in Vue.js for validating the format of user input?

Here is how I have implemented an email sending feature in Vue.js: <template> <button @click="sendMail(); $emit('close')">Send</button> </template> <script> methods: { sendMail () { axios ...

javascriptvalidationvue.js

Tips for picking out a particular item from a list of child elements

When I select the first parent's children array, it ends up selecting every other parent's children as well. This is due to index 0 remaining the same for all of them. How can I specify and highlight a specific child? Link: Check out the stackb ...

javascriptangulartypescriptionic3ngfor

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

Here is the code snippet for displaying table items in my customer_items.html page: <table id="tblData" style="width: 100% !important;" class="display table table-bordered table-striped table-condensed"> <thead> <tr> ...

javascriptjquerypythonajaxdjango

Leveraging the power of LocalStorage in Ionic 2

Trying to collect data from two text fields and store it using LocalStorage has proven tricky. Below is the code I have set up, but unfortunately it's not functioning as expected. Can you provide guidance on how to resolve this issue? In page1.html ...

javascriptionic-frameworkangularionic2

chart.js version 3 does not display the correct date data on the time axis

Struggling to make chart.js work with a time axis is proving to be quite challenging for me. The code I have is as follows: <html> <head> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdnjs.clo ...

javascripthtmlchart.jschart.js3

Create two div elements containing responsive images using HTML and CSS

Can someone assist me in creating responsive DIVs with images inside? Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes. Here is the code snippet: .new_ba ...

htmlcssresponsive-design

z-index in CSS causes links to conflict

I am currently working on a project that requires an image to be displayed prominently on the website along with some links positioned behind it. However, I'm facing an issue where I can't click on the links after implementing z-indexes to layer ...

htmlcsshyperlinkmenuz-index

Node.JS has deceived us with its false promises of `import` support

Could it be that I am making a mistake? I have been eagerly awaiting the experimental ES6 module loader in Node.JS since version 10. This feature is crucial for me to seamlessly use the same code in both the browser and node environments. This is how I w ...

javascriptnode.jsecmascript-6javascript-import

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

I'm struggling to pass the value from a dropdown list in the parent ASPX form to a textbox in the child ASPX form. Parent JavaScript: The first script is used to open the popup window <script type="text/javascript"> var popup; ...

c#javascripthtmlasp.net

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

Insert, delete, and modify rows within the table

I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...

javascripthtml

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

jquerycssajaxclassproperties

When the screen is tapped, the background color transforms into a different shade

Is there a way to change the background color of a specific div when touching it? I have tried using the following code: .x-list-item:active { background: #870000 !important; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, # ...

htmlcsssencha-touch

A straightforward redirection in Express involving a static file

Just starting out with Node and Express and encountering a bit of trouble. I have a static html page where users enter their username via ajax to my server, and then I want to redirect them to another html file. const express = require("express"); const b ...

javascriptnode.jsexpress

Creating a Gatsby blog post on Enhancing Your Website with Rich Snippets for Embedded YouTube Videos

I have a website built with Gatsby and the Netlify CMS, and occasionally I want to include embedded YouTube videos in my blog posts. I am looking to implement a videoObject schema for these videos with the following structure: { "@context": "http:// ...

javascriptreactjsgatsbyschema.orggoogle-rich-snippets

Internet Explorer does not support the split function in JavaScript

I've been utilizing the split function to separate dates, but I encountered an issue where the code doesn't function properly in Internet Explorer, although it works fine in other browsers. The ul and li elements are dynamically generated. <! ...

javascript

Tips for retrieving items from <ng-template>:

When the loader is set to false, I am trying to access an element by ID that is located inside the <ng-template>. In the subscribe function, after the loader changes to false and my content is rendered, I attempt to access the 'gif-html' el ...

javascriptangulartypescript