Re: javascript у файлі.php
беріть елемент вище кнопки.
Як?)
Можете зробити як тут :
Для дерева DOM
[class='list']
│
├─── div[id='ref1']
│ │
│ ├─── *
│ ├─── a[href='#ref1']
│ ├─── a[href='#']
│ ├─── *
│ ...
│
├─── div[id='ref2']
│ │
│ ├─── *
│ ├─── a[href='#ref2']
│ ├─── a[href='#']
│ ├─── *
│ ...
│
...
HTML
<div class="list">
<div id="ref1">
<p>Some text 1</p>
<a href="#ref1">Show 1</a>
<a href="#">Hide 1</a>
<p>More text 1</p>
</div>
<div id="ref2">
<p>Some text 2</p>
<a href="#ref2">Show 2</a>
<a href="#">Hide 2</a>
<p>More text 2</p>
</div>
<!-- ... -->
</div>
CSS
.list>div {
display: inline-block;
padding: 0 1em;
margin: 0.5em auto;
vertical-align: top;
}
.list>div>* {
display: block;
margin: 1em 0;
}
.list>div>a[href^="#"]~*,
.list>div:target>a[href^="#"] {
display: none;
}
.list,
.list>div:target>a[href^="#"]~* {
display: block;
}
JS
function setAttributeForAllElementsAfterSpecified(element, attrName, attrValue) {
while(element = element.nextElementSibling)
element.setAttribute(attrName, attrValue);
};
function toggle(element) {
if(element.getAttribute("href").charAt(0) !== "#")
return true;
var style = element.getAttribute("style");
if(style === "display:none;") {
element.setAttribute("style", "display:block;");
setAttributeForAllElementsAfterSpecified(element, "style", "display:none;");
}
else {
element.setAttribute("style", "display:none;");
setAttributeForAllElementsAfterSpecified(element, "style", "display:block;");
}
return false;
};
document.addEventListener("DOMContentLoaded", function(event) {
var anchorsSnapshot = document.evaluate(
"//*[contains(@class,\'list\')]/div/a[starts-with(@href,\'#\')][1]",
document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < anchorsSnapshot.snapshotLength; i++) {
var anchor = anchorsSnapshot.snapshotItem(i);
anchor.setAttribute("onclick", "toggle(this)");
anchor.nextElementSibling.setAttribute("onclick", "toggle(this.previousElementSibling)");
}
});
Така структура документа хороша тим, що її легко змінювати і сторінка буде працювати навіть тоді, коли JavaScript виключений.
Завантажте прикріплений архів ("index.7z"), розпакуйте документ ("index.html"), відкрийте в браузері, подивіться як він працює, і якщо це те що вам потрібно, то застовуйте ці CSS і JS до свого коду.
Якщо виникнуть питання про це
"//*[contains(@class,\'list\')]/div/a[starts-with(@href,\'#\')][1]"
, то це XPath, тут все розписано.