CODEWITHSUNDEEP
jqueryformsfieldsettoggleclass
eapo
eapo

Reputation: 1081

Style-able collapsible <fieldset> with jQuery

There is a log-in and registration form in separate fieldset-s like shown below: 

<fieldset class="login selected">
    <legend class="login_link">Login</legend>
    <div class="form_container">
        <form id="loginform">
            [loginform]
        </form>
    </div>
</fieldset>
<fieldset class="reg">
    <legend class="registration_link">Registration</legend>
    <div class="form_container clearfix">
        <form id="regform">
            [regform]
       </form>
    </div>
</fieldset>

one is open another is closed by default with css styling 

.login .form_container {
    display: block;
}
.reg .form_container {
    display: none;
}
fieldset {
    border: none;
}
.selected {
    border: 1px inset #000;
}
legend {
    background: #ccc;
    cursor: pointer;
}

fieldset-s can be collapsible using jQuery. Adding and removing the .selected class allow to nicely style the open and the closed separately 

$(".login_link,.registration_link").live("click",function(){
    $(this).parent().parent().children().children('.form_container').toggle();
    $(this).parent().parent().children().toggleClass("selected");
});

​

see the result: http://jsfiddle.net/eapo/43UUP/11/embedded/result/

Can you make more optimal code to do this?

Upvotes: 0

Views: 3641

Answers (3)

James Hill
James Hill

Reputation: 61792

This is a bit cleaner:

$(".login_link,.registration_link").on("click",function(){
    $(".form_container").toggle()
                        .closest("fieldset")
                        .toggleClass("selected");
});

Note: As of jQuery 1.7, .live() is deprecated. Use .on().

Here's a working fiddle.

Upvotes: 1

Popnoodles
Popnoodles

Reputation: 28409

Fieldsets belong inside forms anyway

<form>
<fieldset class="selected">
    <legend>Bejelentkezés</legend>
    <div class="form_container">        
            [loginform]
    </div>
</fieldset>
<fieldset>
    <legend>Regisztráció</legend>
    <div class="form_container clearfix">
            [regform]  
    </div>
</fieldset>
</form>​

Slight change to your CSS

fieldset {
    border: none;
}
.selected {
    border: 1px inset #000;
}
.form_container {
    display: none;
}    
.selected .form_container
{
    display:block;                
}
legend {
    background: #ccc;
    cursor: pointer;
}
​
    ​

Less jQuery

$('legend').on('click', function(){
    $(this).closest('form').find('fieldset').toggleClass('selected');
});​

Though in reality clicking either toggles both

Upvotes: 0

feeela
feeela

Reputation: 29932

I've build a script for that purpose for a project once.

I'm binding the click-event to each legend in a fieldset with a class view_toggle.

HTML:

<fieldset class="view_toggle">
    <legend>Some fieldset title to click on</legend>

    <div class="view_toggle_contents">Fieldset contents to appear after click</div>
</fieldset>

CSS:

<style>
/* view toggle for fieldsets */
.view_toggle legend {
    padding: 0 1em 0 0;
    cursor: pointer; }
.view_toggle legend:after {
    content: ' ▼'; }
.view_toggle legend.is_active_handler:after {
    content: ' ▲'; }
</style>

jQuery toggle:

<script type="text/javascript">
$(document).ready(function() {
    $('fieldset.view_toggle').each(function() {
        var handler = $(this).find('legend');
        var toggledObject = $(this).find('.view_toggle_contents');
        toggledObject.hide();
        handler.click(function() {
            $(this).toggleClass('is_active_handler');
            toggledObject.slideToggle(300);
            toggledObject.find(':input:not(:button):visible:enabled:first').focus();
        });
    });
});
</script>

Upvotes: 0

Related Questions