Dear Support,

How can I add tabs to a Form, which has many sections and eventually form will be too long once data is populated ? 

Have a look on the screen shot

I would like to convert all the sections (Edit Brand, Brand's Products, Brand Outlets & Brand Owners) to a Tab Based view.

Your kind assistance will be highly appreciated :) 

  • No labels

5 Comments

  1. Hugo

    Hi Mr Habibi,

    I did a little bit of mock up on my copy and here's the codes.

    Put this into the footer of your userview theme.

    <script type="text/javascript">
menu = "";
count = 0;
$(".form-section:visible").not(":last").each( function(){
	title = $(this).find(".form-section-title span").html();
	id = $(this).attr("id");
	menu += "<li id='tab-" + id + "'>" + title + "</li>";
	if(count!=0){
		$(this).hide();
	}
	count++;
});

$("form").prepend("<ul id='tab-menu'>" + menu + "</ul><div style='clear:both'></div>'");

$("#tab-menu li").click( function(){
	$(".form-section").not(":last").hide();
	id = $(this).attr("id");
	id = id.substring(4);
	$("#" + id).show();
});

</script>

    Put this into your theme's CSS.

    #tab-menu{
	list-style: none outside none;
}

#tab-menu li{
	background: none repeat scroll 0 0 #EFEFEF;
    border: 2px solid;
    display: inline;
    margin: 10px;
    padding: 10px;
}

    And this is what you can expect.

    Hope this helps!
    Hugo

    1. Andrew Tan

      Thank you Mr Hugo for this superb tip. I don't have to change my forms; all the sections are automatically converted to top menu/tabs.

      However, there is a dot/period showing on the left most menu (as can also be seen on the above image).

      How can I get rid of this dot/period.

      Thank you

      1. Hugo

        Welcome. There's a extra single quote in the script. Here's the updated one.

        <script type="text/javascript">
menu = "";
count = 0;
$(".form-section:visible").not(":last").each( function(){
	title = $(this).find(".form-section-title span").html();
	id = $(this).attr("id");
	menu += "<li id='tab-" + id + "'>" + title + "</li>";
	if(count!=0){
		$(this).hide();
	}
	count++;
});

$("form").prepend("<ul id='tab-menu'>" + menu + "</ul><div style='clear:both'>&nbsp;</div>");

$("#tab-menu li").click( function(){
	$(".form-section").not(":last").hide();
	id = $(this).attr("id");
	id = id.substring(4);
	$("#" + id).show();
});

</script>

        1. Andrew Tan

          Thanks Mr Hugo. Its working perfectly now :-)

    2. Jonathan Yang

      Hi, Hugo:

      I have the same issue, would you please explain more detail for me ? I don't know where to put the code you advised

      I do appreciate your help.

      Sincerely

      Jonathan Yang