A textarea with a height of zero is still visible

My goal is to create collapsible widgets within a side panel on my webpage. Overall, the functionality works smoothly. I am able to adjust the height of child divs to 0px with a transition, causing them to disappear.

However, I have run into an issue where a textarea does not collapse entirely. Even when I set the height of the textarea to 0px, it appears to still take up more space than expected.

The structure of the HTML code is as follows:

<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <div class="collapsible"></div>
</div>

The function toggleSibblings() loops through all the siblings with a class of "collapsible" and toggles the "collapsed" class on them, which sets the height to 0px.

I have provided a jsfiddle link to demonstrate the issue: http://jsfiddle.net/447n50cy/

If anyone could help me understand why the textarea is taking up extra space, I would greatly appreciate it.

javascripthtmlcss

Answer №1

When using the combination of float:left; or display:block; with transitioning to padding:0;, it will result in collapsing. This is especially problematic for inline-block elements as they may not collapse properly.

Answer №2

By default, textareas have margin and padding:

If you want to reset the textarea styling, you can do so by adding the following CSS code:

textarea {
margin:0;
padding:0;
outline:0;
}

You can try applying this in your fiddle. However, keep in mind that you may still want some padding when users input text into the textarea. In such cases, you can easily use jQuery to add or remove classes accordingly.

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

Spin the Three.js camera in a circular motion along the Y-axis

I'm feeling a bit puzzled about this one :S I've written a code that allows my camera to rotate only halfway. I can move the camera along half of a circle using mousemove events, but I actually want it to be able to complete a full rotation :) ...

javascriptthree.js

Transform black and white image to vibrant colors and add various hover effects

There are three images displayed on this webpage: This website is built on WordPress and utilizes the WP Bakery plugin for designing layouts. The images here are set to change from color to grayscale, and back to color upon mouseover. The following CSS c ...

htmlcss

What is the best way to modify the CSS of a child element within the context of "$(this)"

On my search results page, each result has an icon to add it to a group. The groups are listed in a hidden UL element on the page with display:none. The issue I'm facing is that when I click on the icon for one result, the UL appears under every sing ...

javascriptjquerycssthischildren

I noticed that when I include the www in the URL, I am unable to retrieve the API results. However, when I exclude the

Whenever I try to access my website through www.mywebsite.in, it fails to display my data. However, if I visit the site without the www prefix, everything works fine and I can retrieve data from the database. I'm currently utilizing APIs for both get ...

javascriptasp.netapi

Can an onSnapshot event be set up for an array in order to track changes?

In my system, each user is associated with multiple groups. Each user's group membership is stored as an array within their user document. Additionally, there is a tasks collection where each task contains an array of authorizedGroups that correspond ...

javascriptvue.jsgoogle-cloud-firestore

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

For my Amazon.es web scraper built with Selenium, I am using a CSS selector to determine the total number of pages it will iterate through. However, the selector name seems to change dynamically and I must update it daily. As someone not well-versed in H ...

pythonhtmlcssseleniumweb-scraping

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

The Typescript module in question does not contain any exported components or functions related to

I've encountered an unusual issue while working on a React, Redux TypeScript application. It seems that after making some changes, one of the modules has stopped exporting its members. Here is the folder structure: src |---- components |---- contain ...

javascriptreactjstypescriptredux

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

javascriptcssangularjscanvasd3.js

How can I assign the output of a function to a variable within a class in Angular?

Is there a way for the Army class to automatically update its CP property with the sum of CP values from all Detachments in the Detachment class? In the Army class, the CP property should reflect the total CP value from all Detachments and be accessible t ...

htmlangulartypescript

Choose a Different Value for Another HTML Element's Class

Is there a way to preselect an option on another page before it loads? Consider two pages, A and B. If a user clicks a button on page A, I want the default option on page B to be changed to "something" before redirecting them. How can this be achieved s ...

javascriptjqueryhtmlcss

Steps to clear a form after submitting it

Hello all, I have a rather complex form that sends a message successfully with an alert after submission. I'm wondering how I can clear the entire form once it has been submitted to make it simple? Below is my HTML Form and JavaScript code. I would l ...

javascriptjqueryajax

When the document is fully loaded on a page that has been dynamically loaded

Currently utilizing the following: $("#someDiv").load("ajax.html") The contents of "ajax.html" include a document.ready call: <script>$(function() { alert('works') })</script> I'm interested to know exactly when this callbac ...

javascriptajaxjquery

Make sure to verify if all values are contained within an array by utilizing JavaScript or TypeScript

These are the two arrays I'm working with. My goal is to ensure that every value in ValuesToBeCheckArr is present in ActualArr. If any values are missing from ActualArr, the function should return 0 or false. Additionally, there is an operator variabl ...

javascripttypescriptvue.js

Encountered a "Transformer is not a constructor" error when trying to upgrade the React Native SDK version from 0.61.5 to 0.64

https://i.sstatic.net/LYdxj.pngRecently, I upgraded my react native version to the latest one and encountered an error stating "Transformer is not a constructor". The metro-react-native-babel-preset version I am currently using is 0.64.0. Can someone ple ...

javascriptreact-nativemetro-bundler

Why does replacing <input> with <TextField> in Material-UI & React cause the form submission to fail?

Recently, I encountered an issue with my CRUD Todo app's form for adding tasks. Initially built with a basic HTML input and button setup, I decided to enhance the design using Material-UI components. After introducing <TextField> in place of th ...

javascripthtmlreactjsmaterial-ui

PHP - Utilize get_option to send styling options to style.php

I'm having trouble figuring out how to structure my question, but in my plugin folder I have 2 files: 1 - "index.php" add_action( 'wp_enqueue_scripts', 'register_plugin_styles' ); function my_admin_setting() { include(' ...

phpcsswordpress

tips for organizing the <div> element horizontally within a design

I have reviewed some similar questions that have been posted and attempted to apply their solutions to my code. However, I am still encountering difficulties. Below is the code that I need help with. I am looking to organize the main content along with t ...

htmlcss

Changing array indices in JavaScript by splicing elements

I'm experiencing a curious issue that seems to involve overwriting array indices after splicing, or at least that's what I suspect. This problem arises in a small game project built using phaser 2 - essentially, it's a multiplayer jumping ga ...

javascriptexpresssocket.ioaliasphaser-framework

Is there a way to convert the text within a div from Spanish to English using angular.js?

I am working with a div element that receives dynamic text content from a web service in Spanish. I need to translate this content into English. I have looked into translation libraries, but they seem more suited for individual words rather than entire dyn ...

javascriptangularjs