Sidebar menu to hide or expand parts of a form I have some of my code that I have tried to improve on to make it cleaner and efficient and I would like some feedback to see if I am going in the right direction with what I am trying to do.

I have a page with a menu, and when you click on menu item it displays the appropriate fieldset.

HTML:

&lt;!-- dashboard_container --&gt;
&lt;div id="dashboard_container" class=""&gt;

    &lt;!-- Dashboard Menu --&gt;
    &lt;div id="dashboard_menu" class=""&gt;
            &lt;!-- Menu list--&gt;
            &lt;ul id='side_bar_menu'&gt;
                &lt;li id='list_account_details' data-fieldset-id='#fs_account_details'&gt;My Account&lt;/li&gt;
                &lt;li id='list_order_history' data-fieldset-id='#fs_order_history'&gt;Order History&lt;/li&gt;
                &lt;li id='list_notifications' data-fieldset-id='#fs_notifications'&gt;Notifications&lt;/li&gt;
            &lt;/ul&gt;   
    &lt;/div&gt;

    &lt;!-- Dashboard Content --&gt;
    &lt;div id="dashboard_content" class=""&gt;

        &lt;!-- Account details fieldsets --&gt;
        &lt;fieldset id="fs_account_details"&gt; 
            &lt;!-- content here --&gt;
        &lt;/fieldset&gt;

        &lt;!-- Order History fieldsets --&gt;
        &lt;fieldset id="fs_order_history"&gt; 
            &lt;!-- content here --&gt;
        &lt;/fieldset&gt;

        &lt;!-- Notifications fieldsets --&gt;
        &lt;fieldset id="fs_notifications"&gt; 
            &lt;!-- content here --&gt;
        &lt;/fieldset&gt;

    &lt;/div&gt;
&lt;/div&gt;


My original jQuery to display each fieldset was an individual block of code for each button like this:

// Show account details
$('#list_account_details').click( function(){
    $('fieldset').hide( function(){
        $('#fs_account_details').show();    
    });
});

// Show order history
$('#list_order_history').click( function(){
    $('fieldset').hide( function(){
        $('#fs_order_history').show();  
    });
});

// Show notifications
$('#list_notifications').click( function(){
    $('fieldset').hide( function(){
        $('#fs_notifications').show();  
    });
});


And my improvement was to only have one block of code to display each fieldset like this:

// Show appropriate fieldset
$('#side_bar_menu li').click( function(){

    // Get button id
    var button_id = $(this).attr('data-fieldset-id');

    // Hide any opened fieldsets
    $('fieldset').hide( function(){
        // Show appropriate fieldset
        $(button_id).show();            
    });
});


Should I be thinking to automatically write all my code like this, or am I possibly reducing individual functionality of each menu list button by incorporating it all into one block of code like that?

Is my new code even considered an improvement at all?
I think, your improved code looks okay temporarily until you try to add new functionalities. 

A function should do only one thing. 

Trying to add a custom functionality to your improved code would result in clutter and more if else statements.