List display sibling as block/none when is clicked

Member Posts : 18 Join date : 2011-03-09

Hello!

I am trying to create a flip-out menu with JavaScript but it is not quite optimal. Sometimes, it takes two clicks before it flip-out / fold into.

How can I improve my code? Now the code says to every H1 that next time the visit klicks on it, it should hide it´s content. But this should only happen to the h1 that is klicked and not all of them in the same time. Here is my code:

HTML:

Code:: <div id="sidebar">

   <h1>Headline</h1>

<ul>
      <li><a href=".html">subtitle</a></li>
      <li><a href=".html">subtitle</a></li>
      <li><a href=".html">subtitle</a></li>
</ul>


<h1>Headline</h1>
<ul>
      <li><a href=".html">Subtitle</a></li>
      <li><a href=".html">Subtitle</a></li>
      <li><a href=".html">Subtitle</a></li>

</ul>

<h1>Headline</h1>
<ul>
      <li><a href=".html">Subtitle</a></li>
      <li><a href=".html">Subtitle</a></li>
      <li><a href=".html">Subtitle</a></li>

</ul

</div>

Javascript:

Code:: window.onload = function(){

   var menu = document.getElementById("sidebar");
      var ulList = menu.getElementsByTagName("ul");

         for (i = 0; i < ulList.length; i++){
         ulList[i].style.display = "none";
         }

   var h1List = menu.getElementsByTagName("h1");
   for (i = 0; i < h1List.length; i++){

            h1List[i].style.cursor="pointer";


h1List[i].onclick = SiblingVisible;

            }


      }

}

function SiblingVisible(){
         var sibling=this.nextSibling.nextSibling;
         sibling.style.display="block";

         var menu = document.getElementById("sidebar");
      var h1List = menu.getElementsByTagName("h1");

   for (i = 0; i < h1List.length; i++){

      h1List[i].onclick = makeInvisible;
      }
}

function makeInvisible(){
      var sibling = this.nextSibling.nextSibling;
      sibling.style.display="none";

      var menu = document.getElementById("sidebar");
      var h1List = menu.getElementsByTagName("h1");

   for (i = 0; i < h1List.length; i++){


      h1List[i].onclick = SiblingVisible;

}
}

Can I fix this with a while or a if statement? What can I add to only make the H1 that is clicked hide its content?

Member Posts : 21 Join date : 2011-03-09

something simple & modern
PHP Code:

Code:: function toggle_visibility()
{
if ("none" == this.nextElementSibling.style.display) {
this.nextElementSibling.style.display = "";
}
else {
this.nextElementSibling.style.display = "none";
}
}
var i, h1 = document.querySelectorAll("h1");
for (i = h1.length; i--;) {
h1[i].onclick = toggle_visibility;
}

Member Posts : 18 Join date : 2011-03-09

Thank you,knowledge for your simple and modern code! I liked a lot because I could understood it and work with it! I change the querySelectorAll("h1"); to getElementByTagName("h1") because I don´t know query... yet!
Your cod works in firefox but not in IE.

I understand IE dont treat empty white-spaces or new lines as text nodes. I read about this here.

So I tried to put the articles code into yours. But not succeded. Could you give me a hand?

Code:: window.onload = function(){

var menu = document.getElementById("sidebar");
      var ulList = menu.getElementsByTagName("ul");

         for (i = 0; i < ulList.length; i++){
         ulList[i].style.display = "none";
         }

var i, h1 = document.getElementsByTagName("h1");
for (i = h1.length; i--;) {
h1[i].onclick = toggle_visibility;
}

   var h1List = document.getElementsByTagName("h1");
   for (i = 0; i < h1List.length; i++){

            h1List[i].style.cursor="pointer";



   }
}

Code:: function toggle_visibility()
{
var theFirstChild = getFirstChild(this);
var theNextSibling = getNextSibling(theFirstChild);
if (theNextSibling.style.display == "block") {
theNextSibling.style.display = "none";
}
else {
theNextSibling.style.display = "block";
}
}

function getFirstChild(n) {
var y=n.firstChild;
while (y.nodeType!=1) {
y=y.nextSibling;
}
return y;
}

function getNextSibling(n) {
var x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
return x;
}

I get error: y is null. Am I on the wrong road or is it possible to use the articels example and mix it with your to get it also to work in IE?

Member Posts : 21 Join date : 2011-03-09

False wrote:: Your cod works in firefox but not in IE.

What a surprise … that’s why I called it modern (and IE is certainly not a modern browser)

completely superfluous. use CSS.

Code:: .hide {
display: none;
}

using

Code:: <ul class="hide"> …

Your code

Code:: var i, h1 = document.getElementsByTagName("h1");
for (i = h1.length; i--;) {
h1[i].onclick = toggle_visibility;
}

   [color=darkred]var h1List = document.getElementsByTagName("h1");
   for (i = 0; i < h1List.length; i++){
            h1List[i].style.cursor="pointer";
   } [/color]
}

(Don’t Repeat Yourself)

you already have the elements. you already loop through the elements … and you can use CSS again.

Code:: h1 {
cursor: pointer;
}

your code

Code:: function toggle_visibility()
{
var theFirstChild = getFirstChild(this);
var theNextSibling = getNextSibling(theFirstChild);
if (theNextSibling.style.display == "block") {
theNextSibling.style.display = "none";
}
else {
theNextSibling.style.display = "block";
}
}

function getFirstChild(n) {
var y=n.firstChild;
while (y.nodeType!=1) {
y=y.nextSibling;
}
return y;
}

function getNextSibling(n) {
var x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
return x;
}

the firstChild of the clicked element (h1) is … its text. not sure why you do that.

additionally, in this case you would do feature detection:
PHP Code:

Code:: function nextElem()
{
if ("firstElementChild" in this) {
return this.firstElementChild;
}
var next = this.nextSibling;
while (next.nodeType != Node.ELEMENT_NODE) {
next = next.nextSibling;
}
return next;
}

apply as

Code:: var nextElement = nextElem.call(this);

Member Posts : 18 Join date : 2011-03-09

Thank you knowledge for your feedback! I have been studying and tried all day and now at midnight it finally worked!

I appreciate your educational way of explaining things. At first I fought it was a great idea to put over hide and cursor to css but if i put hide inside of css visitors that dont support or have javascript on cant see the meny. And there did not seam to be a good way to put cursor in css since IE support hand and firefox only support pointer.

So what I did was that I keept the code as you helped me with that worked great in Firefox and just added:

Code:: if (navigator.appName == "Microsoft Internet Explorer"){
h1[i].onclick = toggle_IE;
}
else
{

h1[i].onclick = toggle_visibility;
}

function toggle_IE(){

var sibling=this.nextSibling;

if ("none" == sibling.style.display) {
sibling.style.display = "";
}
else {
sibling.style.display = "none";
}
}

Thank you for being my javascript-friend in this so I did not felt so alone in my struggle with javascript, you made me understand a lot more about javascript and also use my own brain (not only just give away code without me understand anything) CodingForums are better then school and you are a great teacher!

Member Posts : 21 Join date : 2011-03-09

the good thing about CSS is that unsupported CSS rules are simply ignored. thus you can write without problem\

Code:: h1 {
cursor: hand; /* ignored by FF */
corsor: pointer; /* ignored by IE */
}

Member Posts : 18 Join date : 2011-03-09

I founded this about pointer.
And when I tried your suggestion Firefox gives an error – “Unknown Property Cursor – declaration dropped”.

I also tried:

Code:: {
cursor:pointer !important;
cursor:hand;
}

But could not make that work. Maybe it needed to be inside of a span. I can try that but now I think I will celebrate that the javascript code at least work both in firefox and IE, tomorrow I can dive in to the cursor thing. But I agree with you it would be better to have it in the css!