I want to make a input and a detail but if you open the detail it hides the input if it is open. I went to search and find this https://i.stack.imgur.com/6Mh8d.png but when I put it on mine it wasn't working. Here is the code:
but in this i put it here and work and paste it back but it don't work?Don't worry about the css.http://jsfiddle.net/34vrmhuw/1/
这是使它消失的代码
<script>//
jQuery(document).ready(function() {
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
</script>
这是HTML：
<div>
<label>Social Security#</label>
<input id="content" name="SSN" type="text" size="42" maxlength="42" />
<var>Auto Hide</var>
</div>
<div>
<details>
<summary id="hideshow">
If you don't have U.S. Social Security number pleases
<b style="color: blue;">CLICK HERE</b>
</summary>
<fieldset>
<h2 style="border-bottom: double #000;">Identification Confirm</h2>
<span>
<del>
<h3 style="background-color: #ccc;">Passport ID Number</h3>
<input type="text" name="PassPort_ID" placeholder="Passport ID Number" />
</del>
<del>
<h3 style="background-color: #ccc;">Identification Number</h3>
<input type="text" name="Identification_Number" placeholder="Identification Number" />
</del>
<del>
<h3 style="background-color: #ccc;">Driver Licence Number</h3>
<input type="text" name="Driver_Licence_Number" placeholder="Driver Licence Number" />
</del>
</span>
<span>
<del>
<h3 style="background-color: #ccc;">Passport Image</h3>
<style type="text/css">
.PassPort-Image > #PassPort_Image {
display: none;
}
</style>
<div class="PassPort-Image">
<label style="width: 200px; height: 200px;" for="PassPort_Image">
<img
id="PassPort_Input"
src="img-BG/Browse-FrontImage+.png"
style="
width: 150px;
height: 150px;
float: left;
display: block;
line-height: 200px;
text-align: center;
border: 1px solid black;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
"
/>
</label>
<input id="PassPort_Image" type="file" name="Img_Passport" />
</div>
</del>
<del>
<h3 style="background-color: #ccc;">ID/DL Image</h3>
<style type="text/css">
.PassPort-Image > #ID_Image {
display: none;
}
</style>
<div class="PassPort-Image">
<label style="width: 200px; height: 200px;" for="ID_Image">
<img
id="ID_Input"
src="img-BG/Browse-FrontImage+.png"
style="
width: 150px;
height: 150px;
float: left;
display: block;
line-height: 200px;
text-align: center;
border: 1px solid black;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
"
/>
</label>
<input id="ID_Image" type="file" name="Img_ID" />
</div>
</del>
<del>
<h3 style="background-color: #ccc;">Face Image</h3>
<div class="PassPort-Image">
<label style="width: 200px; height: 200px;" for="Face_Image">
<img
id="Face_Input"
src="img-BG/Browse-FrontImage+.png"
style="
width: 150px;
height: 150px;
float: left;
display: block;
line-height: 200px;
text-align: center;
border: 1px solid black;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
"
/>
</label>
<input id="Face_Image" type="file" name="Img_Face" />
</div>
</del>
</span>
<span>
<div class="box-infoes">
<div style="color: red; display: none;" class="error">This Is a Wrong passportcode !</div>
</div>
</span>
</fieldset>
</details>
</div>
The snippet you have errors on
.live()method which was deprecated long ago (since, v 1.7 I think), if you are using new version of jQuery, replace it with.on()method, here is a working snippet: