I have an Upper and Lower div in my HTML code.
I am trying to display the Lower div only if the Upper div is present, otherwise hide it.
Is there a way to achieve this using CSS without using Jquery or Javascript?
Note: No modifications should be made to the Upper div as it will appear automatically in certain cases.
If the elements are positioned next to each other, you can achieve this using an adjacent sibling combinator (link) by creating a rule that hides the second element and then another rule that displays it with the combinator:
selector-for-the-second-element {
display: none;
}
selector-for-the-first-element + selector-for-the-second-element {
display: block;
}
Live Example:
.second {
display: none;
}
.first + .second {
display: block;
}<div class="first">This is first</div>
<div class="second">This is second</div>
<hr>
<div class="second">This is second with no first</div>If the elements are siblings but not directly next to each other, you can use the general sibling combinator (link) in a similar way:
selector-for-the-second-element {
display: none;
}
selector-for-the-first-element ~ selector-for-the-second-element {
display: block;
}
I found this code snippet in my index.html file: <form> <input onkeyup="firstnamecheck(this.value)" type="text" name="firstname" id="Start" class="Inputs" /> <button type="submit" name="Murad" id="tester" title="Register">Register</b ...
I keep receiving a QUOTA_BYTES_PER_ITEM error when attempting to store an object, even though my size precheck shows that it should be under the quota. I must be missing something simple here (is this method correct for checking object size?). I've al ...
How can I retrieve the text value from my scores table in the database? Here is an image of my score table: https://i.stack.imgur.com/CUiMw.png The Player_name is stored as Player_id, which is a foreign key from the players' table. While I c ...
My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...
While this code snippet functions perfectly in WebKit browsers, it encounters issues when used in IE and Firefox. Unfortunately, due to other necessary functionalities, using the img tag is essential, making background-image an unviable option. Code Snipp ...
I am currently attempting to generate a treemap visualization utilizing data sourced from a .json file. My approach involves employing d3 and Vue to assist in the implementation process. However, upon attempting to import my data via the d3.json() method ...
So, my issue is with the following JavaScript code snippet: for ( i=0; i < parseInt(ids); i++){ var vst = '#'+String(img_arr[i]); var dst = '#'+String(div_arr[i]); } I'm wondering how I can proceed in jQuery to handle ...
I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...
I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...
When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...
Recently, I've been delving into the world of JavaScript and jQuery to master the art of creating functions. I've noticed that many functions include an (e) in brackets. Allow me to demonstrate with an example: $(this).click(function(e) { // ...
Can someone please assist me with an issue I am facing in submitting a form using BootstrapValidator? I have written the code below to make an AJAX call to a page, and upon receiving a successful response, it reloads the page using location.reload(true). ...
I have explored various discussions on this particular error code. Nevertheless, I am finding it challenging to come across any solutions that are effective (or perhaps I am just not understanding them). While constructing a Protractor test for a webpage, ...
On my page, there are numerous select buttons. I am seeking a way to trigger a jQuery function whenever any select button changes, except for the one with id="Select1". While I understand that I can directly link the function to each desired select button, ...
Here is an example of my jQuery code: $.ajax({ url:"/process_values/", type: "POST", data: {values:['1','2']}, success:function(response){ alert("success: " + response); }, error:function (xhr, textStatu ...
I'm attempting to import images, place them into an array, and then pass that array to a prop in a component to display different images. However, after passing the array to the component, the items accessed from the array are showing as undefined, pr ...
As a beginner in JavaScript, this is my first program. I have written HTML and JavaScript code to display data in a dropdown menu from a Python Django database. However, when I run it, the data is not showing up. Here is my code: <!DOCTYPE html> < ...
My challenge is to have a pre-filled option in a select-box using ng-repeat with AngularJS 1.1.5. However, the select box always starts off with nothing selected and an empty option, which I don't want. It seems to be a side effect of not having anyth ...
Currently, I am utilizing the Bootstrap typeahead API to generate a real-time search feature. The source option is quite useful as it enables an AJAX call to retrieve data from the server. However, I am interested in preloading the source upon page load a ...
I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...