I have the following HTML form:
I am wanting to have fields 1-3 shown as normal when a user visits the page. Fields 4 and 5 are additional non-mandatory for the form to submit, so I would like to hide these and show them when the user clicks a ' ' image/button and have them drop down at the bottom of the form but above the submit button (sort of like a show advanced type thing).
<form action="#" source="email" name="Netflow" style="padding: 10px;">
<div >
<label for="field1" >field1</label>
<input type="text" placeholder="field1" id="name-26a2" name="text-1" required="">
</div>
<div >
<label for="field2" >field2</label>
<input type="number" placeholder="field2" id="email-26a2" name="number" required="">
</div>
<div >
<label for="field3" >field3</label>
<input type="text" placeholder="field3" id="text-c578" name="number-1" >
</div>
<div >
<label for="field4" >field4</label>
<input type="text" placeholder="field4" id="text-a09b" name="text" >
</div>
<div >
<label for="field5" >field5</label>
<input type="text" placeholder="field5" id="text-414f" name="text-2" >
</div>
<div >
<a href="#" >Submit</a>
<input type="submit" value="submit" >
</div>
</form>I have researched how to do this but couldn't find a clear answer. As far as I can tell I would need to use JavaScript to create the drop-down animation showing the additional fields.
If someone could provide me an example of how to achieve this or point me in the right direction with this simple HTML form I would really appreciate it, thanks!
CodePudding user response：
We can hide the additional fields initially when the DOM content is loaded. By adding an event listener on 'click', we can have toggle like functionality by changing the display type on field4 and field5.
A minimalistic working example would look something like this :
<html>
<head>
<script>
window.onload = function () {
const btn = document.getElementById('button-c578');
const field4 = document.getElementById("additional-1");
const field5 = document.getElementById("additional-2");
field4.style.display = 'none';
field5.style.display = 'none';
btn.value = 'Show more';
btn.addEventListener('click', function handleClick() {
if (field4.style.display === 'none') {
field4.style.display = 'block';
field5.style.display = 'block';
btn.value = 'Show less';
} else {
field4.style.display = 'none';
field5.style.display = 'none';
btn.value = 'Show more';
}
});
}
</script>
</head>
<body>
<form action="#" source="email" name="Netflow"
style="padding: 10px;">
<div >
<label for="field1"
>field1</label>
<input type="text" placeholder="field1" id="name-26a2" name="text-1"
required="">
</div>
<div >
<label for="field2"
>field2</label>
<input type="number" placeholder="field2" id="email-26a2" name="number"
required="">
</div>
<div >
<label for="field3"
>field3</label>
<input type="text" placeholder="field3" id="text-c578" name="number-1"
>
</div>
<div >
<input type="button" id="button-c578" name="add"
>
</div>
<div id="additional-1">
<label for="field4"
>field4</label>
<input type="text" placeholder="field4" id="text-a09b" name="text"
>
</div>
<div id="additional-2">
<label for="field5"
>field5</label>
<input type="text" placeholder="field5" id="text-414f" name="text-2"
>
</div>
<div >
<a href="#"
>Submit</a>
<input type="submit" value="submit" >
</div>
</form>
</body>
</html>CodePudding user response：
You don't need JavaScript to show/hide just use CSS to display the content on the click of a button.
Principles of the code I've created/displayed are the same just put the content you want hidden inside a div and call it inside your form before the submit button.
body {
background-color: cornflowerblue;
font-size: 100%;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
line-height: 1.4;
}
main {
display: block;
box-sizing: border-box;
width: 90%;
margin: 1em auto;
padding: 1em 2em;
color: #000;
background-color: pink;
border: .07em solid purple;
border-radius: .5em;
}
/* Expand part */
.expand {
display: none;
}
.expand:target {
display: block;
}<main>
<ul>
<li><a href="#Expand_1">Expand 1</a>
<ul id="Expand_1">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#Expand_2">Expand 2</a>
<ul id="Expand_2">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Has a submarine that he garbage-picked.</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#Expand_3">Expand 3</a>
<ul id="Expand_3">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</li>
</ul>
</main>CodePudding user response：
Here is a small example of how you could approach this problem.
const btn = document.querySelector(".btn");
const to_hide = document.querySelector(".to_hide");
btn.addEventListener("click", function handleClick(event) {
event.preventDefault();
to_hide.classList.toggle("to_hide");
});.to_hide {
display: none;
}<body>
<form>
<div>
<label for="name">Name:</label>
<input type="text" name="name"></input><br>
</div>
<div>
<label for="pass">Pass:</label>
<input type="text" name="pass"></input><br>
</div>
<button >Show more</button>
<div >
<label for="full_name">Full Name:</label>
<input type="text" name="full_name"></input><br>
</div>
</form>
</body>