What is the best way to conceal a div while displaying another div using jQuery?

My goal is to make the element2 div disappear when it is clicked, without showing the element2 div initially. 

$(".toggle").click(function() {
  $(".element2").toggle();
});


$(".close").click(function() {
  $(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
  Element 1
  <div class="toggle">
    toggle
  </div>
  <div class="element2">
    Element 2 
    <div class="close">close Element 2</div>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

To initially hide an element, add the CSS property display: none:

<div class="element2" style="display:none">

It seems like the rest of your code is functioning correctly, unless my interpretation of "I want that when the click activates the element2 div, the element should disappear" is incorrect.

Answer №2

If you want to start with element2 hidden, it's best to add a style tag or create a CSS file to manage all your styles in one place.

Using a style tag:

<div class="element2" style="display:none">

Using CSS:

.element2 {
    display: none;
}

To update your code, make the following changes for element to hide properly:

$(".toggle").click(function() {
    $(".element2").show();
    $(".element").hide();
});

$(".close").click(function() {
    $(".element2").hide();
    $(".element").show();
});

You'll need to adjust the HTML as well to ensure everything works as intended:

<div class="element">
  Element 1
  <div class="toggle">
    toggle
  </div>
</div>
<div class="element2">
  Element 2 
  <div class="close">close Element 2</div>
</div>

Answer №3

Consider implementing the following code snippet:

$(".toggle").click(function() {
  $(this).parent().find(".element2").toggle();
});

$(".close").click(function() {
  $(this).parent().hide(); // ensure correct .element2 is closed
});

In your CSS, remember to add:

.element2 {
   display: none;
}

Answer №4

simply $(".element2").hide(); have it hidden initially

$(function() {
  $(".element2").hide();
  $(".toggle").click(function() {
    $(".element2").toggle();
  });

  $(".close").click(function() {
    $(".element2").hide();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
  <div class="toggle">Toggle </div>
  <div class="element2"> Element 2
    <div class="close"> close</div>
  </div>
</div>

Answer №5

Web Development

<div class="box">
  <div class="menu"></div>
  <div class="content" style="display:none">
    <div class="exit"></div>
  </div>
</div>

CSS Styling

.menu
{
  display:block;
  width:30px;
  height:30px;
  margin-left:15px;
  float:left;
  background:red;
}

.content{
  display:block;
  width:50px;
  height:50px;
  margin-left:10px;
  float:left;
  background:blue;
}
.exit{
  display:block;
  width:25px;
  height:25px;
  margin-left:10px;
  float:right;
  border:1px solid #000;
}

JAVASCRIPT Functionality

$(".menu").click(function() {
  $(".content").toggle();
});


$(".exit").click(function() {
  $(".content").css({"display":"none"});
});

Check out the fiddle here

I hope this solution is helpful for you. Best of luck!

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

Identical Identifiers in jQuery Tab Elements

Currently, I am utilizing the jQuery Tabs library within a small application. Within this page, there are 5 tabs that load content using Ajax. However, an issue arises when a tab is loaded and remains in the browser's memory along with its HTML elemen ...

javascriptjqueryjquery-uijquery-ui-tabs

Is it possible to choose a concealed HTML radio button by using a designated label?

Attempting to work on a unique project here, creating an HTML calendar that allows users to select a day and submit the form without relying on javascript. Below is a snippet of the HTML code: <body> <form action="/Controller/Select" method=" ...

htmlcss

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson

using a tag in flex can disrupt the arrangement of the box's design

What could be the reason for this issue? Is it possible to make the hyperlink appear inline with the rest of the text? .test { padding: 25px; display: flex; height: 100%; text-align: center; font-size: 25px; font-weight: 600; ...

cssflexbox

Steps to Execute a button press with Protractor

My task involves interacting with a popup that displays HTML code like this: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button type="button">Ok</button> </d ...

javascriptseleniumprotractor

Looking to connect information

I have written the following code and I am trying to bind data to ng-model. When I use ng-model = "value", I can see the value in the text field, but I want to update the value when the text input is changed. <tbody ng-repeat="action in model.editAct ...

htmlangularjs

Interactive Icon Feature Instead of Annoying Pop-Ups in JavaScript

Hello there! I need assistance fixing a code issue. Currently, the code automatically pops up when the page is opened. Is there a way to make it clickable instead of popping up automatically? <script type="text/javascript" src="//www.klaviyo.com/media/ ...

javascriptjquery

Triggering an event upon completion of ng-repeat's execution

I am facing a challenge in updating the style of a specific element after ng-repeat has finished changing the DOM. The directive I have implemented for triggering ng-repeat works perfectly fine when adding items to the model, but it does not get called whe ...

javascriptangularjsangularjs-ng-repeat

Preventing Repetition in an HTML List using JavaScript

My HTML list is populated with values from JSON, and I have a button on the page. <button onclick="printJsonList()">CLICK</button> This button triggers the following JavaScript function: function printJsonList(){ console.log(ctNameKeep); ...

javascriptjqueryhtmlcssajax

Challenges encountered with pagination functionality within Datatables integration

I'm encountering a small problem with pagination. When using the "four_button" type, the table appears correctly (with accurate pagination buttons), but clicking on any of the pagination buttons (Next, Previous, etc...) results in an error saying "fnC ...

jquerypaginationdatatables

Once a profile is added to the contact list, it fails to appear immediately. To see the new addition, the page must be manually refreshed, resulting in duplicate contact data being

Currently, there are three crucial files in play within this project. The primary one is index.js, responsible for running the server, while the other two are EJS files that need to be rendered. Despite numerous attempts to render and redirect these files, ...

javascriptnode.jsmongodbexpress

How to dynamically load bootstrap-multiselect within a loop in a vueJs application

I am attempting to dynamically load bootstrap-multiselect in a loop using VueJs. My desired implementation looks something like this: <div class="col-xs-6 col-sm-4 mb-1" v-for="params in param"> <select class="mult" multiple="multiple"> ...

javascriptvue.jsbootstrap-multiselect

Finding multiple locations with Google Maps API Geocoding

I've created a small JavaScript code to geocode various locations and display them on a map. While I can successfully plot a single location, I'm struggling to get it working for multiple locations. Below is the code that currently works for one ...

javascriptgoogle-mapsgeocoding

Is it possible to include a .js file in ajaxComplete?

Is it possible to include a .js file in ajaxComplete? I am looking to load js files after ajax has finished. Can this be accomplished? $( document ).ajaxComplete(function( event,request, settings ) { <script src="/static/js/app.js"></script ...

javascriptjqueryajax

Having trouble retrieving the post ID in WordPress

I am facing an issue with the post id not displaying correctly. Within my jQuery script, when the post id is 1234 it appears as postid:1290. Below is the code snippet calling my action in jQuery. $("#vote").not(".disabled").click(function() { var el ...

phpjquerywordpress

Utilizing AJAX for sending data to a PHP database and automatically updating the page

Currently, I've implemented a button: <ul> <li><button onclick="display('1')">1</button></li> <li><button onclick="display('2')">2</button></li> <li><butto ...

phpjavascriptjqueryajax

Determine the total of all the values displayed in the footer of a jQuery

I am looking to show the total amount in the footer of a jquery datatable. Below is a snapshot of my datatable: https://i.stack.imgur.com/z01IL.png Here is the code snippet for my jquery datatable: for (var i = 0; i < length; i++ ) { var patient = ...

javascriptjqueryajaxdatatables

I'm having trouble with my script only fetching the first row of my PHP table. Can someone please take a look at my code

Below is my JavaScript snippet: $('input#name-submit').on('click', function() { var name = $('input#name-submit').val(); if($.trim(name) != ''){ $.post('getmodalreasonUT.php', {name: name}, ...

javascriptphpmysqlajax

Refreshing the Angular directive following a change in the scope variable

Just getting started with Angular and I've encountered a small issue. Within my template for SirroccoListing, I have the following code. Sirrocco is a directive: <h3>All Sirroccos</h3> <div sirrocco ng-repeat="sirrocco in sirroccos" ...

javascriptangularjs

The showdown between JSON and a hefty JavaScript array

Currently, I am developing a jQuery autocomplete feature that will need to handle between 10 to 20k records. The dataset is static, and I have the option to either retrieve it from a JSON file or embed it directly into the page using a single line of code ...

javascriptperformancejson