Using CSS to create a smooth transition effect when a form is placed

I have a box that fades out when clicked, but the form inside it is not working properly.

When I click on '17 | Lampe im Esszimmer ... C301 | Frau Müller', the 'Beschreibung' and 'Notiz' sections appear, but the complete form is missing.

This is the code I am using:

<!DOCTYPE html>
<html>
    <head>
        <style>
                p {width: 320px; margin: 0px;}
                form {width: 320px; margin: auto;}
                #main {background-color: brown;}
                #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;}
                #id17:target {height: 100px;}
                .center {text-align: center;}

        </style>
    </head>

    <body>
        <div id='main' class='center'>
            <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br>
            <div id='id17' class='center'><br>
                Beschreibung:<br>
                Lampe im Esszimmer defekt. Es ist eine LED Birne.<br>
                Notiz:<br>
                Hier steht eine Notiz, wenn eine geschrieben wurde<br>
                <form id='id17' action='test.php' method='post'>
                    <fieldset>
                        <select name='std'>
                            <option value='0'>0</option>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                        </select><br>
                        <select name='min'>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                            <option value='60'>60</option>
                        </select><br>
                        <input type='submit' value='erledigt'>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

I have seen similar questions, but they have not been answered yet.

Do you understand my issue clearly?

htmlcssformstransition

Answer №1

Successfully resolved the issue by refraining from using an id attribute in the form tag

<!DOCTYPE html>
<html>
    <head>
        <style>
                p {width: 320px; margin: 0px;}
                form {width: 320px; margin: auto;}
                #main {background-color: yellow;}
                #id17 {background-color: green; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;}
                #id17:target {height: 400px;}
                .center {text-align: center;}

        </style>
    </head>

    <body>
        <div id='main' class='center'>
            <a href=#id17>17 | Dining Room Lamp ...<br>C301 | Mrs. Müller</a><br>
            <div id='id17' class='center'><br>
                Description:<br>
                Dining room lamp is broken. It is an LED bulb.<br>
                Note:<br>
                Here is a note, if one has been written.<br>
                <form id='' action='test.php' method='post'>
                    <fieldset>
                        <select name='std'>
                            <option value='0'>0</option>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                        </select><br>
                        <select name='min'>";
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                            <option value='60'>60</option>
                        </select><br>
                        <input type='submit' value='done'>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

Answer №2

Thank you so much for your assistance!

However, I discovered an error that I made on my own.

I mistakenly limited the #id17:target-height to 400px, which I believe was the issue. With my updated CSS code, everything is now functioning correctly:

<!DOCTYPE html>
<html>
    <head>
        <title>DesignTest</title>
        <meta charset='utf-8'>
        <style>
            p {width: 320px; margin: 0px;}
            form {width: 320px; margin: auto;}
            #main {background-color: brown;}
            #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;}
            #id17:target {height: 100%;}
            #id18 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;}
            #id18:target {height: 100%;}
            .center {text-align: center;}
            .id17 {overflow: visible; height: 100px;}
            .id18 {overflow: visible; height: 100px;}
        </style>
    </head>

    <body>
        <div id='main' class='center'>
            <a href=#id17>17 | Lamp in dining room ...<br>C301 | Mrs. Müller</a><br>
            <div id='id17' class='center'><br>
                Description:<br>
                Lamp in the dining room is defective. It is an LED bulb.<br>
                Note:<br>
                A note will appear here if one has been written<br>
                <form class='id17' action='test.php' method='post'>
                    <fieldset>
                        <select name='hours'>
                            <option value='0'>0</option>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                        </select><br>
                        <select name='min'>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                            <option value='60'>60</option>
                        </select><br>
                        <input type='submit' value='done'>
                    </fieldset>
                </form>
            </div>
            <a href=#id18>18 | Lamp in dining room ...<br>C301 | Mrs. Müller</a><br>
            <div id='id18' class='center'><br>
                Description:<br>
                Lamp in the dining room is defective. It is an LED bulb.<br>
                Note:<br>
                A note will appear here if one has been written<br>
                <form class='id18' action='test.php' method='post'>
                    <fieldset>
                        <select name='hours'>
                            <option value='0'>0</option>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                        </select><br>
                        <select name='min'>
                            <option value='15'>15</option>
                            <option value='30'>30</option>
                            <option value='45'>45</option>
                            <option value='60'>60</option>
                        </select><br>
                        <input type='submit' value='done'>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

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

Transitioning Between Div Elements Using Jquery

I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...

jqueryhtmlcss

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

javascripthtmlvue.js

How to transform HTML content into plain text format while retaining the HTML tags

transform this into something like this2 I'm attempting to convert text containing html tags (p, ol, b) into plain text format (similar to the outcome of running a code snippet) - I've experimented with the following code in .net core but it only ...

c#html.netasp.net-corehtml-parsing

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

I'm looking for assistance on how to set the minimum height using jQuery. Can anyone provide

My attempt to use the minHeight property in one of my divs is not successful, and I am unsure why... <div id="countries"> <div class="fixed"> <div class="country" style="marging-left:0px;"></div> <div class="country"&g ...

javascriptjquerycss

Discussing the use of local identification within a <BASE> tag in SVG specifically on the Firefox browser

Encountering an issue on a current Firefox browser running on Win7 while utilizing SVG (although the details may not be directly related to the problem): ` <head> <!-- base href="http://127.0.0.1/package/index.php" /--> < ...

htmlsvg

Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference. Is there a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The table format for numeric values in PHP

I seem to be facing a little issue. Currently, I am using an HTML table format to display the output of a PHP query. The challenge I am encountering is regarding formatting the inventory total field to x.xxx,xx. It appears that the number format function i ...

phphtmlsql

Steps for Disabling Autocomplete in a JSP Page

How can I prevent the browser from remembering the username and password on my JSP page after submitting the form? I've already tried using autocomplete=off in the JSP code. <form name="indexFrm" id="indexFrm" autocomplete="off" method="post"> ...

javascripthtmljspauditing

Implementing Laravel Blade Popup for Supporting Multiple Languages

I'm facing an issue while trying to implement multi-language support in a Laravel project. The problem arises when I try to add a confirmation alert. For instance, onclick="confirm( {{ __('Are you sure you want to remove this method? The ...

phphtmllaravelforms

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Guide on creating HTML content within a ToolTip function for a table row

I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work prop ...

htmlcsstooltipzurb-foundation

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

function toggleButton1() { $("#button1").toggleClass("button-active button-inactive"); $("#button2").toggleClass("button-inactive button-active"); $("#button3").toggleClass("button-inactive button-active"); } function toggleButton2() { $("#butto ...

javascripthtmlcssbootstrap-4

Currently, my goal is to create a functional copy button through the use of JavaScript

I've been attempting to create a basic copy button using JavaScript, but I keep encountering an error. TypeError: null is not an object (evaluating 'myInp.select') Whenever I click the copy button, My code looks like this: <!DOCTYPE htm ...

javascripthtml

What is the best way to combine two variables from separate codes?

To calculate the total sum of the values generated from "sum1" and "sum2," and then add that sum to the class ".results-6". HTML <p class="results-4"></p> <p class="results-5"></p> <p class="results-6"></p> jQuery $( ...

jqueryhtml

Creating a curved edge for a shape in React Native can add a stylish and

Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...

javascriptcssreactjsreact-native

Tables are being tampered with by Chrome

I'm facing an issue where my website appears fine in FireFox (screenshot), but the tables get messed up in Chrome (screenshot). I've gone through my html and css validation and tried various solutions, but I'm completely lost on how to ...

htmlcssgoogle-chrome

Click to Rotate the Shape

I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired r ...

javascriptjqueryhtmlcss

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss