jQueryUIを使用してアコーディオンメニューを表現したいのですがうまく表現でいません。
どなたかわかる方ご教授ください。仕組みとしてはIDのformTopをクリックすると下記の
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" class="autolink">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
サイトタイトル
#
ttl
#
#
- #
-
#
#
#
#
#
#
#
- #
-
#
#
#
#
#
- #
-
#
#
#
#
- #
-
#
#
#
CSS
.clearfix:after{
content:"";
display:table;
clear:both;
}
.clearfix{
/zoom:1;
}
.floatL {
float: left;
}
.floatR {
float: right;
}
body {
margin:0 auto;
padding:0;
text-align:center;
font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
line-height:1.5em;
letter-spacing:0.07em;
font-size: 75%;
}
html>/* /body {
font-size: 12px;
}
input{
position:relative;
top:2px;
}
/ヘッダー*/
header {
max-width: 980px;
min-width: 420px;
padding: 20px 0 0 0;
clear: both;
margin: 0 auto;
}
sns p {
display: inline;
max-width: 810px;
margin-left: 10px;
}
@media screen and (max-width: 890px) {
sns p {
display: block;
width: 3px;
padding-bottom: 5px;
}
}
popOut button {
outline: none;
}
@media screen and (max-width: 1030px) {
popOut {
margin-right: 25px;
}
}
h1 {
max-width: 203px;
margin: 0 auto;
display: block;
}
@media screen and (max-width: 500px) {
h1 {
padding-left: 69px;
}
}
/ヘッダーEnd/
/クリック部分/
formTop {
clear: both;
min-width: 420px;
}
formTopRegion {
width: 50%;
}
formTopRegionBody {
position: relative;
}
formTopRegionBody img {
width: 100%;
}
formTopRegionTtl {
position: absolute;
top: 170px;
left: 25%;
}
formTopLine {
width: 50%;
}
formTopLineBody {
position: relative;
}
formTopLineBody img {
width: 100%;
}
formTopLineTtl {
position: absolute;
top: 170px;
right: 25%;
}
/クリック部分End/
/格納部分/
formConWrap {
max-width: 100%;
min-width: 420px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 270px;
}
/格納部分左/
formRegionCheck {
width: 50%;
background-color: #E2F8C8;
}
formRegionCheck dl {
margin: 0 40px;
padding: 10px 0;
clear: both;
}
formRegionCheck .checkCon {
border-bottom: dotted 2px #535559;
}
formRegionCheck dt {
background: url(../images/listBorder.gif) no-repeat 89% 45%;
width: 15.9591837%;
float: left;
text-align: left;
padding-left: 2.04081633%;
}
formRegionCheck dd {
width: 80%;
height: 100%;
padding: 6px 5px;
float: left;
}
formRegionCheck dd div {
float: left;
padding: 5px 25px 5px 0;
}
formRegionCheck dd div label {
float: left;
}
/格納部分左End/
/格納部分右/
formLineCheck {
width: 50%;
background-color: #93C357;
}
formLineCheck dl {
margin: 0 40px;
padding: 10px 0;
clear: both;
}
formLineCheck .checkCon {
border-bottom: dotted 2px #535559;
}
/#formLineCheckの #jr,#subway,#railway
ddタグの数によってmargin-bottom変更/
formLineCheck dt {
background: url(../images/listBorder.gif) no-repeat 89% 45%;
width: 15.9591837%;
float: left;
text-align: left;
padding-left: 2.04081633%;
}
formLineCheck dd {
width: 80%;
height: 100%;
padding: 6px 5px;
float: left;
}
formLineCheck dd div {
float: left;
padding: 5px 25px 5px 0;
}
formLineCheck dd label {
float: left;
}
/格納部分右End/
/格納部分End/