Use the :target selector to target HTML elements with various unique IDs

Is there a way to use the same CSS selector #Overlay:target that currently hides the overlay to show content instead, or is there a more effective method? Here's what I'm dealing with:

I've implemented an overlay that displays a dismissible message when a page loads. However, the content loads in the background causing my page to be scrollable. Upon testing in Opera Mini, I noticed that the content is displayed in the background as it doesn't seem to support transparency.

To address this issue, I decided to keep the background content hidden until the message is dismissed rather than using a transparent layer to cover it up.

Below is the modified CSS I'm using:

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; }

#Overlay:target { display:none;}

#content { display:none;}

Here's my HTML setup:

<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div>
htmlcss

Answer №1

If you have multiple div elements as siblings, you can utilize the general sibling selector ~. For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Sample Code:

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; 
}
#Overlay, #Overlay a { color: #fff; }
#Overlay:target { display:none;}

#Overlay ~ #content { display:none;}
#Overlay:target ~ #content { display:block;}
<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div>

Answer №2

The recommended approach is to utilize the Jquery show() and hide() methods for controlling visibility of elements.

For more information on using show(): http://www.w3schools.com/jquery/eff_show.asp

And for hide(): http://www.w3schools.com/jquery/eff_hide.asp

To make the content div visible and hide the overlay div, you can use the following code snippet:

$("show_content_button").click(function(){ 
  $("#overlay").hide();
  $("#content").show();
});

If you wish to switch back by making the overlay div visible again and hiding the content div, this code will do the trick:

$("show_overlay_button").click(function(){ 
  $("#overlay").show();
  $("#content").hide();
});

For a more advanced solution, consider implementing bootstrap modals for enhanced functionality. You can find more details here: http://getbootstrap.com/javascript/#modals

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

Clear navigation bar alternative

My website features a transparent bootstrap navbar, with the hero header as the second element on the page set at a -50 margin to place it behind the menu, creating the desired effect. However, I have encountered an issue on certain pages where there is n ...

htmlcsstwitter-bootstrap

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

Tips for showcasing the elements depending on the chosen category

Here is a Vue.js code with multiple templates associated with multiple components. The goal is to display each component based on the selected category. For example, if "single family homes" is selected from the dropdown menu, the "step2" component shoul ...

htmlvue.js

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

Is there a way to stop Internet Explorer 11 from automatically zooming to fit the viewport width? I need the browser to respect my max-width rule and not scale the content to fill the entire width of the viewport on its own. This issue is happening in IE ...

cssinternet-explorerwindows-8.1internet-explorer-11meta

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

cssnode.jsreactjsfirebasenpm

Having trouble loading the linked CSS file in the Jade template

My directory structure is organized as follows: --votingApp app.js node_modules public css mystyle.css views test.jade mixins.jade In the file mixins.jade, I have created some general purpose blocks like 'bo ...

javascripthtmlcssnode.jsexpress

Designing checkboxes with accompanying labels

I am looking to create a vertical list of checkboxes with labels, following the layout below: My options [x] Checkbox 1 [ ] Checkbox 2 [ ] Checkbox 3 [ ] Checkbox 4 I have implemented the method suggested in this Stac ...

csscss-float

The font style in React appears distinct from that of Bootstrap

I am looking to create a login page using both bootstrap and react. I found the perfect style on the official website. To implement this, I included all the necessary bootstrap and CSS files in my index.html file: <!DOCTYPE html> <html lang="en"& ...

cssreactjsbootstrap-4

Achieving perfect vertical alignment for both single and multi-worded links

Is there a way to vertically center single and multi-worded links in a horizontal navigation bar? Currently, the multi-worded links appear centered while the single worded links float to the left. I attempted to adjust the width of ul li a and ul li.colour ...

htmlcsstexthyperlinkcentering

Is it possible to utilize JQuery Mobile CSS independently of the JavaScript functionality?

Having spent numerous days without success trying to integrate JQuery Mobile and AngularJS routing, I am now exploring other possibilities. Is it possible to utilize JQM CSS without depending on JQuery's javascript? Alternatively, are there any reco ...

cssjquery-mobileangularjs

The collapsible sidebar on my website was functioning perfectly with Bootstrap 5, but now it seems to

I've got this sidebar that is supposed to toggle when the button in the top right corner of the photo is clicked. Currently, it's not working even though it was working fine before. I'm not sure what the issue might be. Below is the HTML c ...

javascripthtmlcssbootstrap-5

When you select the checkbox button, a textfield and submit button will appear. Once you click the submit button, the checkbox button will be disabled

<td> <input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)"></td> <td> <span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span&g ...

javascriptjavahtmlangularjs

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

javascripthtmlcssinnerhtml

unusual behavior when using the CSS property transform: rotate

i'm attempting to enable this element to be both draggable and rotatable. However, when I apply transform:rotate(0deg);, I am able to drag it anywhere within the parent container. But when I set it to 90deg, there are certain areas that become undrag ...

javascriptjquerycss

Picture will not be included in the SQL database

When users fill out a HTML form to register for a competition, everything successfully enters into the database except for the Photo Name and Photo. Any ideas on why this might be happening? HTML Form: <form method="post" action="addboat.php"> &l ...

phphtmlmysqlforms

Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligne ...

htmlcssvue.jsvuetify.js

Capture a chart created with chart.js at full screen size across various window dimensions using html2canvas

I am trying to create a PDF featuring images generated by html2canvas. The main component on my webpage looks like this: https://i.sstatic.net/V7RVZ.jpg When I view the generated PDF in fullscreen mode, it appears as follows: https://i.sstatic.net/QW8Ct.j ...

javascripthtmlreactjschart.jshtml2canvas