JSFiddle - React, Tailwind, and code Playground

by anAgent

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
            <strong>Guests </strong>
            <a href="#" title="Click to add a guest" id="addRemoveGuest" rel="tooltip" class="editButtonComment"><span id="addIcon" class="icon-plus"></span></a>
            <form class="form-inline" name="addGuest" id="addGuestForm">
                <div style="margin-right:58px;">
                    <input type="text" class="pull-left" name="guest" id="guest" autocomplete="off" style="width:100%;"/>
                </div>
                <input type="submit" class="btn btn-primary pull-right" value="Add" />
            </form>
        </div>
    </div>
</div>

CSS

.form-inline {
display:none;
}
.form-inline.visible{
display:inline-block;
}

JavaScript

$("#addRemoveGuest").click(function() {
    var $form = $("#addGuestForm");
    $form.toggleClass("visible");
    var $icon = $("#addIcon");
    if ($form.is(".visible")) {
        $icon.removeClass("icon-plus").addClass("icon-minus");
    } else {
        $icon.removeClass("icon-minus").addClass("icon-plus");
    }
});