Div that automatically expands

Question

Div that automatically expands

Currently facing a bit of an issue. I’m attempting to expand and retract the height of #inner upon clicking, with the intention for the height of #container to increase automatically without manually setting it to ‘auto’. Unfortunately, it seems that #container doesn’t enlarge as expected when set to ‘auto’. Any assistance on this matter would be greatly appreciated. Thank you in advance.

HTML:

<div id=‘container’>
    <div id=‘inner’>This is the inner div</div>
</div>

Jquery:

 function handler1() {
     $(this).css('height', '+=65px');
     $(this).one("click", handler2);
 }

 function handler2() {
     $(this).css('height', ' -= 65px ');
     $(this).one("click", handler1);
 }

 $("#inner").one("click", handler1);

CSS:

#container {
    display: block;
    width: 200px;
    height: auto;
}
#inner {
    height: auto;
}

jquery html css

Answer 1

Answer №1

This code can be simplified significantly by utilizing classes instead of constantly adding css through jQuery. By avoiding the overhead of continuously adding and removing events with one, a single handler that tracks the state of the div with a class can be used.

Here is the structure of the code:

<div id="container">
    <div id="inner">This is the inner div</div>
</div>

The JavaScript function handles the click event on the inner div and toggles its height based on whether it already has the 'added' class or not:

 function toggleHeight() {
     var inner = $("#inner");
     if (!inner.hasClass('added')) {
        inner.css('height', '+=65px').addClass('added');
     }
     else {
        inner.css('height', '-=65px').removeClass('added');
     }
 }

 $("#inner").on("click", toggleHeight);

The CSS styles define the appearance of the container and inner divs:

#container {
    width: 200px;
    background: red;
}

#inner {
    background: yellow;
}

You can view the demo on jsFiddle to see the changes in action: http://jsfiddle.net/4pv6y6as/

Answer 2

This code can be simplified significantly by utilizing classes instead of constantly adding css through jQuery. By avoiding the overhead of continuously adding and removing events with one, a single handler that tracks the state of the div with a class can be used.

Here is the structure of the code:

<div id="container">
    <div id="inner">This is the inner div</div>
</div>

The JavaScript function handles the click event on the inner div and toggles its height based on whether it already has the 'added' class or not:

 function toggleHeight() {
     var inner = $("#inner");
     if (!inner.hasClass('added')) {
        inner.css('height', '+=65px').addClass('added');
     }
     else {
        inner.css('height', '-=65px').removeClass('added');
     }
 }

 $("#inner").on("click", toggleHeight);

The CSS styles define the appearance of the container and inner divs:

#container {
    width: 200px;
    background: red;
}

#inner {
    background: yellow;
}

You can view the demo on jsFiddle to see the changes in action: http://jsfiddle.net/4pv6y6as/

Answer 3

Answer №2

It seems that the outer container (#container) is also expanding. The issue in your code appears to be a mix-up of different quotation marks.

You are mixing up ' with ‘

and

Also, you are confusing " with “

For example:

$(this).css('height', ‘ -= 65px ');

or here:

$(“#inner").one("click", handler1);

This seems to be a syntax problem...

Additionally, it is recommended to always declare classes in HTML using " instead of ‘

Avoid using rounded apostrophes like you have done sometimes :)

I've created a fiddle for reference.

Best regards, timotheus

Answer 4

It seems that the outer container (#container) is also expanding. The issue in your code appears to be a mix-up of different quotation marks.

You are mixing up ' with ‘

and

Also, you are confusing " with “

For example:

$(this).css('height', ‘ -= 65px ');

or here:

$(“#inner").one("click", handler1);

This seems to be a syntax problem...

Additionally, it is recommended to always declare classes in HTML using " instead of ‘

Avoid using rounded apostrophes like you have done sometimes :)

I've created a fiddle for reference.

Best regards, timotheus

Div that automatically expands

Answer №1

Answer №2

Similar questions

Develop an HTML table using either JSON or jQuery in Javascript

Attempting to transmit a value from an ASP.NET JavaScript script to my C# Code Behind function by utilizing a Hidden Field

How can I apply a CSS class to a group of radio buttons within a radio button list?

How to utilize PHP $_SESSION variables with jQuery for error handling and page redirections

What is the best way to keep fixed input at the bottom of the page?

Unique Floating Bullet Icons Ascending When Enlarged

What is the best way to remove top divs without causing the bottom divs to shift upwards?

Unexpected behavior exhibited by form in response to CSS styling

Discovering whether input field is currently in focus using jQuery

Incorporate visual elements such as images that resemble checkboxes

Including numerous pins on a map

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Encountering a 404 error for Jquery and Laravel

Using a snippet of HTML code from one Angular component in another component

Centering the viewport on a spacious website

How to utilize $(this) with different selectors in JQuery?

Is it possible to dynamically change an ngModel value directly from the component?

Remove the boundaries from the grid and only retain the box

jQuery has a problem with the $.each method

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements