【至急】contact form 7 にタブをつけたい

こんにちは。
ワードプレスでHPを作成してます。

上の「商品に関するお問い合わせ」と「その他のお問い合わせ」をタブで切り替えるようにし、
「商品に関するお問い合わせ」には「該当商品（li）」を入れたいと思っています。

ご教授お願い申し上げます。

行動規範の内容に同意します

回答3件

ベストアンサー

検証しましたが、以下の様な感じで問題なく動作しました。

HTML
1<ul id="tabs">
2	<li><a href="#tab1">フォーム01</a></li>
3	<li><a href="#tab2">フォーム02</a></li>
4</ul>
5<ul id="panels">
6	<li id="tab1">[contact-form-7 id="31" title="hoge01"]</li>
7	<li id="tab2">[contact-form-7 id="42" title="hoge02"]</li>
8</ul>

JavaScript
1(function($){
2	$(function(){
3		$("#panels li:not(:first)").hide();
4		$("#tabs li:first a").addClass("selected");
5		$("#tabs li a").click(function(){
6			if(!$(this).hasClass("selected")){
7				$("#tabs li a.selected").removeClass("selected");
8				$(this).addClass("selected");
9				$("#panels li").hide().filter($(this).attr("href")).fadeIn();
10			}
11			return false;
12		});
13	});
14})(jQuery);