I'm working with bootstrap and I'm trying to make a simple page that contains a list of input boxes and dropdowns with the form-inline approach.
I would like the form fields obviously to be at equal distances between them, and, if possibile, to make the size relative to the label and field length. This is the ugly result I get, just to explain:
As you can see from the code below, I gave a col size of 3 for each field trying to make each row contain 4 inputs, but the result is ugly: if the label is too long I can't see the content of the dropdown, the spacing between each input depends on the length of the input, so the result is not eye-catching.
The next problem is the vertical spacing between inputs. Obviously everything should be in the same form to make a single submit, and this is the result when an input requires a new line. I obviously would like to have a nice vertical spacing but I don't know how to.
This is the code of the page:
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="../resources/miotema/favicon.ico" />
<title>Tool fgfgfg</title>
<script src="<c:url value="/resources/miotema/js/jquery-2.1.4.min.js" />" type="text/javascript" ></script>
<script src="<c:url value="/resources/miotema/js/bootstrap.min.js" />" type="text/javascript" ></script>
<script src="<c:url value="/resources/miotema/js/common.js" />" type="text/javascript" ></script>
<link rel="stylesheet" href="<c:url value="/resources/miotema/css/bootstrap.min.css" />" type="text/css" />
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right menu header">
<li class="dropdown">
TEST<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Visualizza </li>
<li>Nuovo</li>
<li class="divider"></li>
<li>Voce Menu separato</li>
</ul>
</li>
<li>Chiamata Ajax</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<form class="form-inline" action="<c:url value="/insert" />"
method="post">
<div class="well bs-component">
<fieldset>
<legend>Inserimento Dati</legend>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>testtttttttttttt</strong></span> <select class="form-control"
name="durata_contrattuale">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>uahuaduhaudhtfftftftftftftfuadu</strong></span> <select class="form-control" name="capacita_banda">
<option>10 Mb/s</option>
<option>20 Mb/s</option>
<option>30 Mb/s</option>
<option>40 Mb/s</option>
<option>50 Mb/s</option>
<option>60 Mb/s</option>
<option>70 Mb/s</option>
<option>80 Mb/s</option>
<option>90 Mb/s</option>
<option>100 Mb/s</option>
<option>200 Mb/s</option>
<option>300 Mb/s</option>
<option>Altro</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>fy</strong></span> <select class="form-control"
name="opzione_realizzazione">
<option>Basic</option>
<option>Plus</option>
<option>Ultra</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>dtddtdttd</strong></span> <select class="form-control" name="ultra_protezione">
<option>Si</option>
<option>No</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>blablabalbala</strong></span>
<select class="form-control" name="lbublbu">
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Any hint?
first of all you missed "ROW" class element that will serve as parent for all col-3's you made. Second there is 5 col-3's**** which means grid of 15 not 12 as it should be. Try to count which of the inputs should be bigger than others, and count down how many col's you need. After that make it sum equal to 12 and also you might try to put width: 100%; for input.
Try this:
#media (min-width: 992px){
.bs-component .form-control{
margin-bottom: 15px;
}
}
Related
I have created a dynamic inline form with bootstrap 4 and javascript. I would like to fit all my fields in one row when viewed in a desktop/laptop browser. In the mobile view, I want to stack all my fields one below the other and they should be of equal width.
I tried the bootstrap grid column layout and also attempted to fix a width for each field but it does not seem to be working. Please help.
The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
The javascript code is provided below:
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
I am unable to fit all the fields in one row in desktop view. I want my inline form to be mobile-responsive as well. Please advise.
See I have changed few things in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap Grid System . Please go through the code because I have removed some codes from your original code. I think you expect this.To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Desktop view
Mobile view
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
I have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content1">
<div style="padding-left:120px; padding-right:120px">
<form class="form-horizontal" role="form" method="post"
id="formID" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Name of business</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" >
</div>
</div>
<br>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location">
<option value="">-- Select Area --</option>
<?php
$q = mysqli_query($con, "select * from tbl_areas");
while($result = mysqli_fetch_assoc($q))
{
echo "<option value='$result[areaid]'>$result[area]</option>";
}
?>
</select>
</div>
</div>
<div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="right">
<?php include 'include\front_right.php'?>
</div>
</div>
</div><!--row end-->
</div>
I have used here tooltip for only 'select' tag. but still not working.
Please give me solution for this.
Please chekc this demo how it is working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Have you included jquery?
Here is a working example:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location">
<option value="">-- Select Area --</option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
</select>
</div>
</div>
</div>
How can we remove some styles of Jquery Chosen using Jquery or javascript. I want to remove 'top : 100%' attribute from 'chosen-drop' class. I tried $('.ddlDpndtRsrc').find('.chosen-container .chosen-drop').css('top',''); but it is not working.
<div class="controlsDiv ddlDpndtRsrc">
<select data-placeholder="Select" id="ddlDependentResource" name="dependent_resource" data-col="DependentResource" class="infoInput chsnddl" style="display: none;">
<option value="-1"></option>
<option value="3">Business visa</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 90%;" title="" id="ddlDependentResource_chosen"><a class="chosen-single chosen-default" tabindex="-1"><span>Select</span><div><b></b></div></a>
<div class="chosen-drop" style="top: 0px;">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" style="" data-option-array-index="1">Business visa</li>
</ul>
</div>
</div>
</div>
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ddlDpndtRsrc">
<div class="chosen-container chosen-drop">
Dummy text
</div>
</div>
</body>
</html>
JAVASCRIPT
var element = $('.ddlDpndtRsrc').find('.chosen-container.chosen-drop');
element.css({
'top' : '0%'
});
http://jsbin.com/niyadi/3/watch
After making your HTML post above readable, what you have provided should work, ensure .chosen-container .chosen-drop doesn't already have !important overriding the top value.
It may be a good idea to get used to replacing <b> with <strong> also :)
I got some problems with my JavaScript!
<form action="addcategory.php" name="addContact">
<input id="category" name="category" type="hidden" value="" />
</form>
This is my form... nothing special here.
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
document.forms['addContact'].submit();
}
}
This is the JavaScript.
The JavaScript is placed AFTER the form, so the DOM is loaded.
<div onclick="addCategory()" class="save">Ny kategori</div>
That's the div that triggers the function... The div is placed at the beginning og the page, but should not make any difference.
When I click the div, a prompt comes up, I enter a string and press OK, but then i get the follow error: "Cannot call method 'submit' of undefined"
Please help, this is so annoying!
EDIT:
<?php
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleCRM | Kategorier </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="search_bar">
<a href="../"><div id="logo">
SimpleCRM
</div></a>
<div class="wrapper">
<div class="floats" style="float: left">
<table>
<tr>
<td>
<?php
?></td>
</tr>
<tr>
<td id="menu">
<div onclick="addCategory()" class="save">Ny kategori</div>
<div onclick="editContact()" class="button">Omdøb kategori</div>
<div id="delete" onclick="deleteContact()" class="button">Slet kategori</div>
</table>
</div>
<div class="floats" style="float: right">
<table>
<tr>
<td align="right">
<?php
?>
</td>
</tr>
<tr>
<td align="right">
<div onclick="wnidow.location = 'categories.php'" id="changecategories">Administrer kategorier</div>
<div onclick="window.location = '../logout.php'" id="logout">Log ud</div>
</td>
</table>
</div>
</div>
</div>
<div align="center" class="wrapper">
<div id="categories">
<form>
<select size="20" name="category">
<?php
?>
</select>
</div>
<div style="width:500px;" class="wrapper">
<div onclick="window.location = '../CRM?CRM=' +Math.floor((Math.random()*1000)+1)" id="back">
Tilbage
</div>
</div>
</div>
<form action="addcategory.php" name="addCategory" id="addCategory">
<input id="category" name="category" type="hidden" value="" />
</form>
</body>
</html>
<script>
function deleteContact(){
if(confirm('ADVARSEL:\nDu er ved at slette denne kontakt!'))
{
document.forms['delete'].submit();
}
}
function editContact(){
window.location.href = document.URL + '&edit=true';
}
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
console.log(document.forms);
document.forms.addCategory.submit();
}
}
</script>
This is my entire document (the PHP code has been removed), so i hope you can now see everything more clearly...
The problems is that you have a form tag inside another form element:
<form>
<select size="20" name="category">
...
<form action="addcategory.php" name="addCategory" id="addCategory">
...
</form>
This is invalid and the inner form tag is ignored, and hence an element with name or ID addCategory does not exist. Remove the first form tag, it doesn't seem to serve any purpose.
That's one if the reasons why proper indentation is important.
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.