開閉式コンテンツ 全機種対応版

「完全版」として紹介した開閉式コンテンツですが、その後全機種検証でMEDIUS等でjQueryのslideUp,slideDown,slideToggleが動かない機種があることが判明し、以下のように書き換えました。

<dl>
	<dt class="show-hide">●●●について・・・</dt>
	<dd>●●●とは・・・</dd>
</dl>
dt.show-hide +dd	{
	display:none;
	}

dt.show-hide +dd.opened	{
	display:block;
}
$(function(){
	$('dt.show-hide').each(function(j){
		$('dt.show-hide').eq(j).click(function(){
		if($('+dd','dt.show-hide').eq(j).css('display') =='none')
			$('+dd','dt.show-hide').eq(j).addClass('opened');
		else
			$('+dd','dt.show-hide').eq(j).removeClass('opened');
		});
	});
});


jQueruのslideのアニメーションが無くなったのはさみしいけど、全機種で開閉式コンテンツが動作するようになりました。
全機種対応するにはここまでしないとならないのですね。
Wikipediaなどのスマートフォン版の「表示する」ボタンがjQueryのアニメーション無しでシンプルにcssのdisplayの切り替えだけなのも、広範囲の機種に対応する必要があるからなのかもしれないですね。