タグ: 練習

とりあえず今日やったことをば。

jQueryのtoggleで表示、非表示する例。

これを↓

こうしたりする↓

※モザイクはなんとなく。

HTMLのソースはこれ

<p id="toggle_bar" class="tl"><span id="icon" class="strong fonts-02">＋</span><a href="#">××××××××××××××××××××××</a></p>

<div id="search_area" class="search-select clearfix">
<ul>
	<li><input id="1" class="check01" name="tag" type="checkbox" value="1" /><label for="1">××××××</label></li>
	<li><input id="2" class="check01" name="tag" type="checkbox" value="2" /><label for="2">××××××</label></li>
	<li><input id="3" class="check01" name="tag" type="checkbox" value="3" /><label for="3">××××××</label></li>
	<li><input id="4" class="check01" name="tag" type="checkbox" value="4" /><label for="4">××××××</label></li>
	<li><input id="5" class="check01" name="tag" type="checkbox" value="5" /><label for="5">××××××</label></li>
	<li><input id="6" class="check01" name="tag" type="checkbox" value="6" /><label for="6">××××××</label></li>
	<li><input id="7" class="check01" name="tag" type="checkbox" value="7" /><label for="7">××××××</label></li>
	<li><input id="8" class="check01" name="tag" type="checkbox" value="8" /><label for="8">××××××</label></li>
	<li><input id="9" class="check01" name="tag" type="checkbox" value="9" /><label for="9">××××××</label></li>
	<li><input id="10" class="check01" name="tag" type="checkbox" value="10" /><label for="10">××××××</label></li>
	<li><input id="11" class="check01" name="tag" type="checkbox" value="11" /><label for="11">××××××</label></li>
	<li><input id="12" class="check01" name="tag" type="checkbox" value="12" /><label for="12">××××××</label></li>
	<li><input id="13" class="check01" name="tag" type="checkbox" value="13" /><label for="13">××××××</label></li>
	<li><input id="21" class="check01" name="tag" type="checkbox" value="21" /><label for="21">××××××</label></li>
	<li><input id="30" class="check01" name="tag" type="checkbox" value="30" /><label for="30">××××××</label></li>
	<li><input id="31" class="check01" name="tag" type="checkbox" value="31" /><label for="31">××××××</label></li>
	<li><input id="34" class="check01" name="tag" type="checkbox" value="34" /><label for="34">××××××</label></li>
	<li><input id="35" class="check01" name="tag" type="checkbox" value="35" /><label for="35">××××××</label></li>
	<li><input id="36" class="check01" name="tag" type="checkbox" value="36" /><label for="36">××××××</label></li>
	<li><input id="38" class="check01" name="tag" type="checkbox" value="38" /><label for="38">××××××</label></li>
</ul>
</div>

jsはこれ

$("#search_area").css("display", "none");
$('#toggle_bar').click(function(){
    $('#search_area').toggle();
    var lab = $('#icon').html();
    if(lab == '－') {
        $('#icon').html('＋');
    } else {
        $('#icon').html('－');
    }
});

簡単っすな。。表示を無理矢理変えてるところがイケてないけど。。

参考
toggle()

jQueryのtoggleメソッドって気持ちいい