position overlapping div elements

There are three float:left divs in my setup

<div class="center">
 <div class="fade1"></div>
 <div class="fade2"></div>
 <div class="fade3"></div>
</div>

The objective is to click on these divs and reveal content that should appear below them. I am able to fade them out using jQuery.

$('.fade1').click(function(){
$('.fade1').fadeOut(700);   
});

To achieve this, I need 3 content divs inside the center div. However, placing them directly beneath the fade-divs poses a challenge due to their floating nature. As a result, the content ends up appearing next to the fade divs which are meant to hide them.

Answer №1

Check out this link: jsFiddle Link
The code snippet required to make this happen is:

$(function() {
  $('.fade').click(function() {
    var $this = $(this);
    var $content = $('#' + $this.attr('id') + '_content');

    $this.fadeOut(600, function() {$this.before($content.show());});
  });
});

Refer to the jsFiddle Link for detailed changes in the html and css.

Answer №2

Possibly. Dimming the appearance without completely concealing it :).

$('.dim').click(function(){
   $('.dim').animate({'opacity':0},700);   
});

This action will not make it disappear entirely. Instead, your div will still occupy its space on the page.

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

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

Automatically populate fields in WordPress using jQuery

I have a jQuery script that populates a text input field in a customized Wordpress search. The current code looks like this: $(window).load(function(){ var availableTags = [ "Option A", "Option B", "Option C", "Option D" ]; $( "#option_field" ).autocomple ...

Validation message causing Bootstrap form inline to lose center alignment

Could someone please assist me with form inline in Bootstrap? I am trying to ensure that all inputs are of the same height (or centered), but I'm facing an issue when a validation message is displayed. DEMO: http://codepen.io/Tursky/pen/gpvgBL?editor ...

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

<form class="responses"> <input type="radio" name="option" value="0">False</input> <input type="radio" name="option" value="1">True</input> </form> Just tested: $('[name="option"]').is(':checked ...

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

Unlocking the style within a .css file during an Angular unit test - here's how to do

I have been working on unit testing for an Angular app, specifically trying to access styles from a .css file within the unit test. I will share with you what I have attempted so far. component.listedIps.length=0; fixture.detectChanges(); let whitelis ...

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...

Troubleshooting Problem with Responsive Layout and Embedded YouTube Video

Before I dive into this, I want to acknowledge that I understand my coding practices for this project are not up to par. I have been under time constraints to finish this project quickly (as a favor) and plan to address these issues at a later time. On my ...

What is the method for adjusting the position of the navbar toggler icon on a small screen in Bootstrap?

In my Bootstrap 4 project, I have created a navbar with the brand logo centered and navlinks on both sides. However, when the screen size is reduced to a small size, the toggler button appears at the center right after the brand logo. I want the toggler bu ...

What causes the focus to be lost when hovering over the second item in the sub list

Link to Fiddle: https://jsfiddle.net/n3tzbn4o/3/ Snippet of CSS: /* Styling for Menu element */ .menu { position: relative; z-index: 100; height: 40px; width: 100%; } Whenever the cursor hovers over Menu 3 > '2015' > Assesmen ...

Add the information from the form to a JSON document

I am trying to add form data to a json file using the code below. However, I keep getting an error response whenever I submit the data via post. Can you help me identify where the issue lies? HTML <form class="ajax form-inline"> <div class="form ...

Determine in Jquery whether a custom error handler for $.AjaxError has been set

I am looking to establish a default handler for ajax errors: $( document ).ajaxError(function(event, jqXHR, settings) { //custom error handling code; }); However, I only want my custom handler to run if there is no existing error function set in the ...

Tips for eliminating repetitiveness in situations such as BEM modifiers

As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements. The challenge at hand is changing the link color to red when product-desc-name has the mark class. The snippet below illustrat ...

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

What is the best way to synchronize MultiView and TreeView in ASP.NET web forms?

I'm looking to set up a tree view on the left side of my screen, along with a multiview showing content based on the selected tree item on the right. However, I'm having trouble aligning the multiview properly next to the tree view - it seems to ...

Proper functioning of CSS directional styles is not being achieved

Is there a way to solve the issue of word-wrap and word-break styles not working when adding direction: rtl; in CSS using Pure CSS? Note: Browser support needed for IE9+ and Chrome. #container { height: 440px; width: 150px; left: 40%; top: 20%; border: ...

Ensuring Consistent Headings While Scrolling

Imagine having headings structured like this: <h1 class="fixontop">heading 1</h1> content goes here. . . . long paragraph. <h1 class="fixontop">heading 2</h1> 2nd content goes here. . . . long paragraph. <h1 class="fixontop"> ...

Unable to deserialize an instance of java.util.List from the VALUE_STRING

In the process of developing a new application, my goal is to send data to a server and receive a response in a specific format. Here's an example of how the format should look: { "userName" :"<a href="/cdn-cgi/l/email-protection" class="__cf_e ...