Increase the width of the floating Div to 100% after it has been floated

Trying to achieve a layout where the left dive hides and the right div floats left, but I need the right div to resize and fill the blank space of the left dive after hiding or showing.

<div class="main">
<!--heqd start-->
<div class="head">
    <div class="head_l">
    <!--logo -->
    <img src="master3_img/logo_m.png" alt="logo" />
    </div>

    <div class="head_r"></div>
<div style="clear:both"></div>
</div>
<!--head end-->

<!--body part start-->
<div class="body">
<!--body left-->
<div class="body_l">
<div id="slide"></div>
<div id="clicky" class="s_r">Click me</div>

<!--body right-->
<div class="body_r"></div>
<!--body right end-->

</div>
<!--body part end-->

    $(function(){ 

$("#clicky").click(function(){
    if($("#slide").is(':visible'))
  {
    $("#slide").animate({ width: 'hide' }); 
  }
  else
  {
    $("#slide").animate({ width: 'show' }); 

  }
});



});

View my working demo here

Answer №1

Give this code a try, it should help you with your issue:

Replace

<div class="body_r"></div>
with
<div id="body_r"></div>
.

$(function(){ 

  $("#clicky").click(function(){
    if($("#slide").is(':visible'))
      {
        $("#slide").animate({ width: 'hide' }); 
      }
    else
      {
        $("#slide").animate({ width: 'show' }); 
        $("#body_r").width('100%');       
      }
 });   
});

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

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

Retrieving CSS file using admin-ajax.php in WordPress

The website has been tested on GTmetrix and you can view the report here I am puzzled as to why admin-ajax.php is causing a delay of over 3 seconds in loading time on this particular page that I am attempting to optimize. It seems to be related to a CSS ...

What is the reason that jQuery does not work on HTML generated by JavaScript?

One of my JavaScript functions, named getImages, is responsible for loading the following HTML structure: // Function starts here function getImages() { $.getJSON(GETIMAGELIST, function(data) { var items = []; // Populating the HTML $.each(dat ...

Error encountered in MVC 5: When using jQuery to assign a value to an object, the

Currently tackling a web development project as a newbie in the field and running into an issue with this snippet of code (which sets the end date to tomorrow if left blank): var date = new Date($('#txtStartDate').val()); var tomorrow = date.ge ...

What could be causing the hover style to not take effect on the leaf nodes in jQuery Treeview?

Upon reviewing Sample 1 on this specific page, you may notice that the text turns red when hovering over the folder entries, but not for the leaf entries. My goal is to have the styling for the leaf entries mimic the behavior of the folder entries. Each b ...

After the page reload, the text box remains filled and does not reset to null

Even after refreshing the page, the text box does not reset to null. It retains the value that was entered previously. This issue occurs while implementing pagination. <form method='post' class="search" action="<?= base_url() ?>my-subsc ...

What is the best method to choose the following sentence once the final * has been identified

In the navigation text, my objective is to pick out the final sentence following * For example; Home*Development*Mobil and Web Development I am only interested in selecting the last sentence after * --> (Mobil and Web Development) ...

Trouble displaying data in Jquery JSON

I've been on the hunt for hours, trying to pinpoint where the issue lies within my code. Despite scouring different resources and sites, I can't seem to figure it out. Whenever I click "Get JSON Data," nothing seems to display below. Can someone ...

Creating a custom form validation within a modal window featuring tab navigation, all styled with the latest Bootstrap

Within a modal, I have incorporated a header with tabs and tab content in the body, following the structure of Bootstrap 5. The modal footer includes buttons separated by dots. When encapsulating the modal body and footer within a form tag for validation ...

Leveraging jquery's setInterval for automating tasks like a cronjob

I've been experimenting with Cronjobs and I've run into a roadblock. My goal is to have the cronjob execute every X minutes, containing a script with JavaScript that calls an ajax request every second for the next 60 seconds. The ajax call trigge ...

Using jQuery to Populate a Drop Down Menu with a JSON Feed in Internet Explorer

Utilizing Jquery, I am attempting to populate a Drop Down Select element with data from a JSON feed retrieved through accessdb, a Javascript library designed for accessing an Access .mdb file as a local database. Here is my HTML: <select id="instructo ...

Is it necessary to specify a data type for the response when making an AJAX POST request?

After carefully reviewing my code, I have ensured that all the variables in my JavaScript match and are properly set up. Additionally, I have confirmed that all the variables in my data array for my AJAX request correspond correctly to my $_POST['var& ...

The process of obtaining points through accurate responses using form inputs

My task is to create a unique quiz consisting of 10 questions. Half of the questions are multiple choice, which require radio inputs, while the other half are written answers that need text inputs. To ensure accuracy and provide a scoring system, I came ac ...

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

The timing of setTimeout within the $.each function does not behave as expected

I am looking to back up a list, delete all items within it, and then append each item one by one with a delay of 1 second between them. This is the approach I have taken: var backup = $('#rGallery').html(); $('#rGallery li').remove(); ...

PHP echo functions are not functioning properly in a dynamically loaded PHP page through jQuery's .load function

Within my WordPress installation, I have index.php and desktop.php files. The goal is to load desktop.php into #tLoad only if the browser window width is greater than 800px. While this works fine, I am encountering issues when trying to use PHP functions a ...

Having difficulty duplicating a button with a click event using jQuery

I have implemented a button that reveals a phone number when clicked using the code below: var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12); var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGOR ...

Add a date to my database using an HTML form

I am having trouble inserting a date into my database using PHP. Everything else inserts correctly, but the date reverts to the default 0000-00-00 as if nothing was entered. I have set the data type for the date field. Here is the code snippet: <?php ...

Using Ajax, jQuery, and PHP to upload images along with additional data

I am currently facing an issue while trying to upload data along with an image using ajax and php. Whenever I include the line of code dataResult.file = form_data;, I receive an error message saying "illegal invocation". Please refer to the code snippet be ...

Using Ajax to pass a dictionary of dictionaries

I'm currently developing a Django website and facing an issue with passing data from Javascript to Python using Ajax. Below is the code snippet: // Javascript file function myFunc() { {...} // Generate var 'values' which is a di ...