Skip to main content
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
本文に 492 文字追加
ソース リンク
hinaloe
  • 4,751
  • 1
  • 13
  • 25

+、-切り替え

+、-切り替え

+、-切り替え

+、-切り替え
<div id="accordion" class="accordionbox">
    <dl class="accordionlist">
        <dt class="clearfix">
            <div class="title">
                <p>+、-切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>+、-切り替え</dd>
        <dt class="clearfix">
            <div class="title">
                <p>+、-切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>+、-切り替え</dd>
    </dl>
</div>

JS
$(function(){
$(".accordionbox dt").on("click", function() {
$(this).next().slideToggle();
// activeが存在する場合
if ($(this).children(".accordion_icon").hasClass('active')) {
// activeを削除
$(this).children(".accordion_icon").removeClass('active');
}
else {
// activeを追加
$(this).children(".accordion_icon").addClass('active');
}
});
});

$(function(){
    $(".accordionbox dt").on("click", function() {
        $(this).next().slideToggle();   
        // activeが存在する場合
        if ($(this).children(".accordion_icon").hasClass('active')) {           
            // activeを削除
            $(this).children(".accordion_icon").removeClass('active');              
        }
        else {
            // activeを追加
            $(this).children(".accordion_icon").addClass('active');         
        }           
    });
});

CSS
.accordionbox{
width: 50%;
background:#FBDBC4;
margin: 10px auto 40px;
padding: 20px;
}
.accordionlist dt{
display:block;
background: #fff;
padding: 20px 0 10px 5px;
border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
border-top: none !important;
}
.accordionlist dt .title{
padding-left: 10px;
float: left;
}
.accordionlist

.accordionbox{
    width: 50%;
    background:#FBDBC4;
    margin: 10px auto 40px;
    padding: 20px;
}
.accordionlist dt{
    display:block;
    background: #fff;
    padding: 20px 0 10px 5px;
    border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
    padding-left: 10px;
    float: left;
}
.accordionlist dd{
    display:none;
    background: #fff;
    padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.accordion_icon {
    position: relative;
    width: 30px;
    height: 30px;
    float: right;
    margin-right: 5px;
}
.accordion_icon span {
    position: absolute;
    left: 6px;
    width: 50%;
    height: 2px;
    background-color: #F88789;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*+、-切り替え*/
.accordion_icon.active span:nth-of-type(1) {
    display:none;
}
.accordion_icon.active span:nth-of-type(2) {
    top: 5px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
<dd>+、-切り替え</dd>

dd{
display:none;
background: #fff;
padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon {
position: relative;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
}
.accordion_icon span {
position: absolute;
left: 6px;
width: 50%;
height: 2px;
background-color: #F88789;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
top: 5px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/+、-切り替え/
.accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion_icon.active span:nth-of-type(2) {
top: 5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);で囲んだ部分に、
-ms-transform: rotate(180deg);ここの部分にcheckboxにチェック済みや
-o-transform: rotate(180deg);inputの入力画面で入力済みの場合、
}だと開いている状態にするにはどうすればよいのでしょうか。

+、-切り替え
ddで囲んだ部分に、ここの部分にcheckboxにチェック済みやinputの入力画面で入力済みの場合、だと開いている状態にするにはどうすればよいのでしょうか。

+、-切り替え

+、-切り替え

+、-切り替え

+、-切り替え

JS
$(function(){
$(".accordionbox dt").on("click", function() {
$(this).next().slideToggle();
// activeが存在する場合
if ($(this).children(".accordion_icon").hasClass('active')) {
// activeを削除
$(this).children(".accordion_icon").removeClass('active');
}
else {
// activeを追加
$(this).children(".accordion_icon").addClass('active');
}
});
});

CSS
.accordionbox{
width: 50%;
background:#FBDBC4;
margin: 10px auto 40px;
padding: 20px;
}
.accordionlist dt{
display:block;
background: #fff;
padding: 20px 0 10px 5px;
border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
border-top: none !important;
}
.accordionlist dt .title{
padding-left: 10px;
float: left;
}
.accordionlist dd{
display:none;
background: #fff;
padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon {
position: relative;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
}
.accordion_icon span {
position: absolute;
left: 6px;
width: 50%;
height: 2px;
background-color: #F88789;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
top: 5px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/+、-切り替え/
.accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion_icon.active span:nth-of-type(2) {
top: 5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}

+、-切り替え
ddで囲んだ部分に、ここの部分にcheckboxにチェック済みやinputの入力画面で入力済みの場合、だと開いている状態にするにはどうすればよいのでしょうか。
<div id="accordion" class="accordionbox">
    <dl class="accordionlist">
        <dt class="clearfix">
            <div class="title">
                <p>+、-切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>+、-切り替え</dd>
        <dt class="clearfix">
            <div class="title">
                <p>+、-切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>+、-切り替え</dd>
    </dl>
</div>

JS

$(function(){
    $(".accordionbox dt").on("click", function() {
        $(this).next().slideToggle();   
        // activeが存在する場合
        if ($(this).children(".accordion_icon").hasClass('active')) {           
            // activeを削除
            $(this).children(".accordion_icon").removeClass('active');              
        }
        else {
            // activeを追加
            $(this).children(".accordion_icon").addClass('active');         
        }           
    });
});

CSS

.accordionbox{
    width: 50%;
    background:#FBDBC4;
    margin: 10px auto 40px;
    padding: 20px;
}
.accordionlist dt{
    display:block;
    background: #fff;
    padding: 20px 0 10px 5px;
    border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
    padding-left: 10px;
    float: left;
}
.accordionlist dd{
    display:none;
    background: #fff;
    padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.accordion_icon {
    position: relative;
    width: 30px;
    height: 30px;
    float: right;
    margin-right: 5px;
}
.accordion_icon span {
    position: absolute;
    left: 6px;
    width: 50%;
    height: 2px;
    background-color: #F88789;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*+、-切り替え*/
.accordion_icon.active span:nth-of-type(1) {
    display:none;
}
.accordion_icon.active span:nth-of-type(2) {
    top: 5px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
<dd>+、-切り替え</dd>

ddで囲んだ部分に、
ここの部分にcheckboxにチェック済みや
inputの入力画面で入力済みの場合、
だと開いている状態にするにはどうすればよいのでしょうか。

本文に 2809 文字追加
ソース リンク
user25636
  • 67
  • 6
  • 18

http://www.dataplan.jp/blog/css/3127
ここのサイトを参考にして作りたいのですが、

+、-切り替え

+、-切り替え

+、-切り替え

+、-切り替え

JS
$(function(){
$(".accordionbox dt").on("click", function() {
$(this).next().slideToggle();
// activeが存在する場合
if ($(this).children(".accordion_icon").hasClass('active')) {
// activeを削除
$(this).children(".accordion_icon").removeClass('active');
}
else {
// activeを追加
$(this).children(".accordion_icon").addClass('active');
}
});
});

CSS
.accordionbox{
width: 50%;
background:#FBDBC4;
margin: 10px auto 40px;
padding: 20px;
}
.accordionlist dt{
display:block;
background: #fff;
padding: 20px 0 10px 5px;
border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
border-top: none !important;
}
.accordionlist dt .title{
padding-left: 10px;
float: left;
}
.accordionlist dd{
display:none;
background: #fff;
padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon {
position: relative;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
}
.accordion_icon span {
position: absolute;
left: 6px;
width: 50%;
height: 2px;
background-color: #F88789;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
top: 5px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/+、-切り替え/
.accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion_icon.active span:nth-of-type(2) {
top: 5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}

+、-切り替え
ddで囲んだ部分に、ここの部分にcheckboxにチェック済みやinputの入力画面で入力済みの場合、だと開いている状態にするにはどうすればよいのでしょうか。

http://www.dataplan.jp/blog/css/3127
ここのサイトを参考にして作りたいのですが、

+、-切り替え

+、-切り替え

+、-切り替え

+、-切り替え

JS
$(function(){
$(".accordionbox dt").on("click", function() {
$(this).next().slideToggle();
// activeが存在する場合
if ($(this).children(".accordion_icon").hasClass('active')) {
// activeを削除
$(this).children(".accordion_icon").removeClass('active');
}
else {
// activeを追加
$(this).children(".accordion_icon").addClass('active');
}
});
});

CSS
.accordionbox{
width: 50%;
background:#FBDBC4;
margin: 10px auto 40px;
padding: 20px;
}
.accordionlist dt{
display:block;
background: #fff;
padding: 20px 0 10px 5px;
border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
border-top: none !important;
}
.accordionlist dt .title{
padding-left: 10px;
float: left;
}
.accordionlist dd{
display:none;
background: #fff;
padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon {
position: relative;
width: 30px;
height: 30px;
float: right;
margin-right: 5px;
}
.accordion_icon span {
position: absolute;
left: 6px;
width: 50%;
height: 2px;
background-color: #F88789;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
top: 5px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/+、-切り替え/
.accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion_icon.active span:nth-of-type(2) {
top: 5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}

+、-切り替え
ddで囲んだ部分に、ここの部分にcheckboxにチェック済みやinputの入力画面で入力済みの場合、だと開いている状態にするにはどうすればよいのでしょうか。
ソース リンク
user25636
  • 67
  • 6
  • 18

アコーディオンメニューで入力しているとき項目のみ開いた状態にする

アコーディオンメニューでメニューを開閉の設定をしていますが、入力している項目だけ開いた状態にし、
他のメニューは閉じた状態にするにはどうすればいいでしょうか。