[RESOLVED] [ Javascript ] Swaping Hidden Divs

I wish to have readers have the the optiom to chose to read alternative chapters in a story.

right now I'm useing:

Code:

---

function swap(what)
{
        var theDivs = document.getElementsByTagName('div');
        for(var i = 0; i < theDivs.length; i++)
        {
                if(theDivs[i].id.search('swap') == 0)
                {
                        theDivs[i].style.display = 'none';
                }
        }
        document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
        var theDivs2 = document.getElementsByTagName('div');
        for(var j = 0; j < theDivs2.length; j++)
        {
                if(theDivs2[j].id.search('swap') != -1)
                {
                        theDivs2[j].style.display = 'none';
                }
        }
}

---

With

Code:

---

<h5 id="partN1">Part N1</h5>
<p>blah</p>
<h5 id="partN2">Part N2 - Read: <span class="button" onclick="swap(0)">Original</span> |  <span class="button" onclick="swap(1)">Alternative</span> parts</h5>
<div  id="swap0">
<p>blah</p>
</div>
<div  id="swap1" class="alt">
<p>blah</p>
</div>
<h5 id="partN3">Part N3</h5>
<p>blah</p>
<h5 id="partN4">Part N4 - Read: <span class="button" onclick="swap(2)">Original</span> |  <span class="button" onclick="swap(3)">Alternative</span> parts</h5>
<div  id="swap2">
<p>blah</p>
</div>
<div  id="swap3" class="alt">
<p>blah</p>
</div>

---

Unfortunately, I would I like the Originals versions to not be hidden on load, and only hidden when an alternative chapter, for /that chapter/ is chosen. While at the moment only one alternative version of any chapter is being used, it would be nice if the code could support a possibility of more than one

Rather than just using id to set the information, why don't you also supply a class of original and alternative to help decide what to hide/show at time of onload?

Quote:

---

Originally Posted by PeejAvery

Rather than just using id to set the information, why don't you also supply a class of original and alternative to help decide what to hide/show at time of onload?

---

Well I'm not overly family with javascript nor it's DOM model. so I'm not sure how to check it's for a div's class.

And while that is a great solution to the load time issue (once I know how to target them). I still need a solution how to toggle on and off what ment to be it's partner divs.

Right now my script will hide all other 'swap' divs when it turn on the linked div.
(note i want them to be able to chose between original and alternatives, on a per chapter basis)

Rather simple...

Code:

---

<script type="text/javascript">
window.onload = function() {
  var elems = document.getElementsByTagName("div");
  for (var i = 0; i < elems.length; i++) {
    var curElem = elems[i];
    if (curElem.className.search("alternative") > -1) {curElem.style.display = "none";}
    else {curElem.style.display = "block";}
  }
}

function toggle(obj) {
  var elems = document.getElementsByTagName("div");
  for (var i = 0; i < elems.length; i++) {
    var curElem = elems[i];
    if (curElem.className.search(obj) > -1) {
      curElem.style.display = (curElem.style.display == "block") ? "none" : "block";
    }
  } 
}
</script>

<h5>Part N1</h5>
<p>blah</p>

<h5>Part N2 <span class="button" onclick="toggle('part2')">Toggle Original/Alternative</span></h5>
<div class="original part2">
  <p>Original</p>
</div>

<div class="alternative part2">
  <p>Alternate</p>
</div>

<h5>Part N3</h5>
<p>blah</p>

<h5>Part N4 <span class="button" onclick="toggle('part4')">Toggle Original/Alternative</span></h5>
<div class="original part4">
  <p>Original</p>
</div>

<div class="alternative part4">
  <p>Alternate</p>
</div>

---