JQueryアコーディオンコードを使用して、次のことを達成しようとしています:
- ページのロード中に、アコーディオン内に隠されたコンテンツが表示されないようにします (つまり、短時間点滅します)。ユーザーがアコーディオンを展開した場合にのみこのコンテンツを表示したいのですが、一部のブラウザーでは、ページの読み込み中にこのコンテンツを表示できます。
- ユーザーが Javascript を無効にしている場合、アコーディオンの H1 タブ (Accordion Test など) を表示しますが、その下に隠されたコンテンツは表示されません。
例を挙げると、これは私がエミュレートしようとしている種類のものです。
http://www.outdoorgb.com/c/inflatable_boats_kayaks/
[Read More] ボタンをクリックしてみてください。詳細情報が表示されます。ここで、Javascript を無効にしてみてください。ボタンをクリックしても何も起こらず、詳細情報が表示されないことに注意してください。これに対して、Google がそのコンテンツなどをクロールしない可能性があるため、これが発生するのは良いことではないと言うかもしれません。ただし、Lynx を介してこの URL を実行すると、コンテンツが正常に読み取られるように見えます。これが問題になると思う人はいますか？
とにかく、これは上記のポイントを満たすために適応しようとしているコードです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accordion Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh.
Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>
</body>
</html>
そこにいるあなたの専門家が提供できる助けがあれば、感謝します。
よろしくお願いします
ジョン
==============================================
アップデート
==============================================
Pete の助けのおかげで、私はこれらの問題の最初の部分を解決しました。JavaScriptが無効になっている場合にコンテンツを非表示にする方法を知っている人はいますか? 現在のコードは次のようになります。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accordion Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />
<script>
$(document).ready(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('#hideAccordion').show();
});
</script>
</head>
<body>
<script language="text/javascript"> document.write('<div id="hideAccordion" style="display:none">'); </script>
<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh.
Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>
<script language="text/javascript"> document.write('</div>'); </script>
</body>
</html>