<Style>でCSSフォームを作成して使用します。<Body>ではHTMLなし

私はちょうど最近HTMLを学び、小さなプログラムを持っています。<Style>でCSSフォームを作成して使用します。<Body>ではHTMLなし

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

.triangleright { 
 
    width: 0; 
 
    height: 0; 
 
    border: solid 10px; 
 
    border-color: transparent transparent transparent green ; 
 
} 
 

 
.triangledown { 
 
    width: 0; 
 
    height: 0; 
 
    border: solid 10px; 
 
    border-color: white transparent transparent transparent ; 
 
} 
 

 
button.accordion { 
 
    background-color: rgb(213,227,233); 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active { 
 
    background-color: rgb(0,56,96); 
 
    color: white; 
 
} 
 

 
button.accordion:after { 
 
    /* content:"/2795"; */ 
 
    content: "<div class="triangleright"></div>"; 
 
    font-size: 13px; 
 
    float:left; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    /* content:"/2796"; */ 
 
    content: "<div class="triangledown"></div>"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
}

<button class="accordion">&nbsp; &nbsp; Title</button> 
 
<div class="panel"> 
 
    <p>Content</p> 
 
</div>

私は、 "タイトル" の前に小さなtriangeを作成する必要があります。しかし、私が作成した三角形をbutton.accordion:afterとbutton.accordion.active:afterに挿入すると、うまくいきません。

出典

2016-05-28 htmlamateur

：[http://www.w3schools.com /cssref/pr_gen_content.asp](http://www.w3schools.com/cssref/pr_gen_content.asp） – charlietfl

チェック一度content' –

@user：私の更新された回答とフィドルのリンクを参照してください。ちょっとしたCSS改造が必要ですそれ以外の場合は完全に動作します。 –

あなたは、CSSのcontentプロパティにmore info

をHTML要素を作成することはできませんまた、あなたが別のアプローチを持つことができ、あなたはdivの中にそのボタンを置くことができる、とdivの中で、あなたはどの絶対位置の要素を持つことができます矢印を示し、そしてあなたがnextElementSiblingを処理しているとそれは同じDIV扱うことができる...

ここにあなたの問題

HTML解決fiddleです：

<div class="parent"> 
    <div class="arrow triangleright"></div> 
    <button class="accordion">&nbsp; &nbsp; Title</button> 
    <div class="panel"> 
    <p>Content</p> 
    </div> 
</div>

JAVASCRIPT：

var acc = document.getElementsByClassName("accordion"); 
var accdiv = document.getElementsByClassName("arrow"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
    onAccClick(this); 
    } 
} 

for (i = 0; i < accdiv.length; i++) { 
    accdiv[i].onclick = function() { 
    onAccClick(this.nextElementSibling); 
    } 
} 

function onAccClick(elem) { 
    elem.classList.toggle("active"); 
    elem.nextElementSibling.classList.toggle("show"); 
    elem.previousElementSibling.classList.toggle("triangledown"); 
}

CSS：

.triangleright { 
    width: 0; 
    height: 0; 
    border: solid 10px; 
    border-color: transparent transparent transparent green; 
} 

.triangledown { 
    top: 22px !important; 
    right: 13px !important; 
    width: 0; 
    height: 0; 
    border: solid 10px; 
    border-color: white transparent transparent transparent; 
} 
div.arrow { 
    cursor: pointer; 
} 
button.accordion { 
    background-color: rgb(213, 227, 233); 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion.active { 
    background-color: rgb(0, 56, 96); 
    color: white; 
} 

.parent { 
    position: relative 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 

.arrow { 
    position: absolute; 
    top: 16px; 
    right: 10px; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 500px; 
}

CSSでHTMLを置くことができない `

出典

2016-05-28 13:58:30

ありがとうございます！ :) – htmlamateur

はい、私は十分な15の評判を持っているとき私はします:) – htmlamateur

私はちょうど私たちが三角形に直接クリックすると、それは動作しません、私たちが三角形の外をクリックするとき、それは動作します。これを改善する方法はありますか？ – htmlamateur

<Style>でCSSフォームを作成して使用します。<Body>ではHTMLなし

答えて

関連する問題