私はこれらすべてに不慣れですが、学ぼうとしていると言うことから始めましょう。そうは言っても、ボタンIDを使用してdivクラスを追加/削除する方法を理解するために頭を悩ませてきました。これらのテキストボックスを約200個作成できるので、どんな助けでも大歓迎です。添付されているのは、サンプルhtml(論文テーマのワードプレスで使用するため)と私が使用しているcssです。また、jsfiddleへのリンクを含めて、私が達成しようとしていることを確認できるようにしました(ただし、失敗しました)。
http://jsfiddle.net/EXPH77/rz683/
CSS:
#the_box {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 300;
color: #oooooo;
background-color: #ddddee;
width: 320px;
}
.box_header {
padding-top: .5em;
font-weight: 600;
color: #ffffff;
background-color: #477ede;
text-align: center;
height: 25px;
font-size:1.2em;
}
.box_text {
text-align: left;
padding: 1px;
margin-bottom: 3px;
font-size:0.84em;
}
.media {
text-align: center;
padding: 4px;
margin-bottom: 3px;
}
.box_expand {
text-align: left;
padding: 1px;
margin-bottom: 3px;
font-size:0.84em;
}
p.headtext {
color: #000000;
font-weight: 600;
margin-bottom: 3px;
text-align: left;
font-size:1.2em;
}
HTML:
<div id="the_box">
<div class="box_header"> Exercise Title </div>
<div class="media">
<iframe width="300" height="195" src="http://www.youtube.com/embed/Ok97QIq2f4E" frameborder="0" allowfullscreen></iframe>
</div>
<div class="box_text">
<p class="headtext">Muscles</p>
<ul style="list-style: none; ">
<li><strong>Primary:</strong> MM</li>
<li><strong>Secondary:</strong> MM</li>
<button id="addClass">Instructions</button>
<script type="text/javascript">
$("#addClass").click(function () {
$('#the_box').addClass('box_expand');
$("#removeClass").click(function () {
$('#the_box').removeClass('box_expand');
});
</script>
</div> <div class="box_expand">
<p class="headtext">Preparation</p>
<ol>
<li>Instructions</li>
<li>Go</li> <li>Right</li>
<li>Here</li>
</ol>
<p class="headtext">Movement</p>
<ol>
<li>Instructions</li>
<li>Go</li>
<li>Right</li>
<li>Here</li>
</ol>
<p class="headtext">Comments/Tips</p>
<ul>
<li>Instructions</li>
<li>Go</li>
<li>Here</li>
</ul>
</div>
</div>