sawMedlem sedan mars 20011 880 inlägg JAg har en aspx sida som innehåller ett FAQ(Frequent Askt Question) jag tror
det stavas så.
Framför varje fråga finns ett plustecken som blir ett minustecken när man
har klickat på plustecknet (och får då svaret).
<script type="text/javascript">
<!--
function openIt(faq) {
showIt = document.getElementById(faq);
if (showIt.style.display == "none") {
showIt.style.display = "block";
}
else {
showIt.style.display='none';
}
return false;
}
function changeText(faq) {
if(document.getElementById(faq).innerText =="+")
document.getElementById(faq).innerHTML ="-"
else if(document.getElementById(faq).innerText =="-")
document.getElementById(faq).innerHTML ="+"
}
-->
</script>
..men som koden är, så kan man klickar på alla frågorna(plustecken), och jag
ville att om man klickar på ett nytt plustecken så skulle de andra stängas.
Hur kan man ändra min kod så att det blir den önskade effekten?
Frequently Asked Question(s)
Det du "får" göra är att du måste "gruppera" dina element i en egen div eller liknande:
Loopar ut alla element inne i den. Om "changeText" faqId träffar någon av de som finns inne i din "grupp" då skall du expandera innehållet och ändra "innehålls" elementet till display block medans dom andra till none.
snabbt exempel och inte direkt det bästa sättet att göra detta på kanske men:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
.content { display:none;}
//-->
</style>
<script type="text/javascript">
<!--
function show(faq) {
var list = document.getElementById("faq-list");
var a = list.getElementsByTagName("a");
var div = list.getElementsByTagName("div");
if(div.length == a.length)
{
for(var i=0;i<div.length;i++) {
if(div[i].id=="content_" + faq)
{
div[i].style.display = "block";
a[i].getElementsByTagName("span")[0].innerHTML ="-";
}
else
{
div[i].style.display = "none";
a[i].getElementsByTagName("span")[0].innerHTML ="+";
}
}
}
}
//-->
</script>
</head>
<body>
<div id="faq-list">
<a href="#" id="topic_1" onclick="show(1);"><span>+</span> Info about bob</a><br />
<div class="content" id="content_1">Bob is a nice man!</div>
<a href="#" onclick="show(2);"><span>+</span> Info about Bobby</a><br />
<div class="content" id="content_2">Bobby is evil.</div>
</div>
</body>
</html>
sawMedlem sedan mars 20011 880 inlägg Hej och tack för dett svar, men jag har en del problem.
Alla divarna är öppna men det står ett + tecken framför varje.
Det är bara den 1:a och 2:ra som är stängd och går att öppna.
Nu var väll inte ditt exempel direkt gjort för en Repeater, men jag vore
tacksam om du tog dig en blick på detta.
<asp:Repeater ID="Repeater2" runat="server" >
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div id="faq-list">
<a href="#" id="topic_<%# DataBinder.Eval(Container.DataItem, "Id")%>"
onclick="show(<%# DataBinder.Eval(Container.DataItem, "Id")%>);">
+<b></b>Fråga:</b> <%# DataBinder.Eval(Container.DataItem, "Question")%>
</a><br />
<div class="content" id="content_<%# DataBinder.Eval(Container.DataItem, "Id")%>">
<b>Svar:</b><%# DataBinder.Eval(Container.DataItem, "Answer")%>!
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<asp:Repeater ID="Repeater2" runat="server" >
<HeaderTemplate>
<div id="faq-list">
</HeaderTemplate>
<ItemTemplate>
<a href="#" onclick="show(<%# DataBinder.Eval(Container.DataItem, "Id")%>);"><span>+</span><%# DataBinder.Eval(Container.DataItem, "Question")%></a><br />
<div class="content" id="content_<%# DataBinder.Eval(Container.DataItem, "Id")%>">
<b>Svar:</b><%# DataBinder.Eval(Container.DataItem, "Answer")%>!
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
Flyttade div:en till header och footer + ändrade lite i koden.
En liten ändring i JS:
<script type="text/javascript">
<!--
function show(faq) {
var list = document.getElementById("faq-list");
var a = list.getElementsByTagName("a");
var div = list.getElementsByTagName("div");
if(div.length == a.length)
{
for(var i=0;i<div.length;i++) {
if(div[i].style.display == "block")
{
div[i].style.display = "none";
a[i].getElementsByTagName("span")[0].innerHTML ="+";
}
else if(div[i].id=="content_" + faq)
{
div[i].style.display = "block";
a[i].getElementsByTagName("span")[0].innerHTML ="-";
}
else
{
div[i].style.display = "none";
a[i].getElementsByTagName("span")[0].innerHTML ="+";
}
}
}
}
//-->
</script>
sawMedlem sedan mars 20011 880 inlägg Helt sanslöst bra, många tack.
