I have trouble writing functions for any ID

[cyclingg]

I created a codepen showing what I need done about 3 times in a page. I used the actual “ID” name though; long form.

http://codepen.io/cyclingg/pen/HCKvw

The first thing I want to happen is the text to be hidden or displayed. The text on the button is an addition I added later.
I will have 3 sections within the same page with a button displaying “Show” or “Hide” and some text will be hidden or displayed. I tried to write the actual function to use any ID and it failed. It works when I actually use the

<

div>’s id that contains the text to be hidden.

Note: I am for the most part following an example in my course notes on how to write this.

This is what I tried without the button text:

function toggleDisplay(id)
{
var e = document.getElementById(id);
e.style.visibility = “none”;

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

}

//bind the event handling functions
document.getElementById(“showHide1”).onclick = toggleDisplay(“toggleMe1”);

This does not work. I thought that I would only need to add the “var e = document.getElementById(id);” within the function and then when I call the function, I would add the id name.

This is where I am having trouble when I need to write a function that you can pass any “Id” into it. I really don’t know if I am going to get javaScript.

[Alen]

See if this helps

http://codepen.io/alenabdula/pen/GsrBh
Let us know if you need further explanation.

[cyclingg]

Alen, I will have a look at your code tomorrow.

Does your code keep the same space when hidden? I wanted the text to push down when it displays and then removes the space when it is hidden. In my example, the button moves back up to the paragraph when the other paragraphs get hidden again.

I do not want to have blank spaces on my page.

[Mottie]

It would probably be better to use class names instead of id’s. Try this code (demo):

//show and hide paragraphs in Deals page
function toggleDisplay(button) {
    var hidden = button.parentNode.parentNode.querySelector('.hidden');

    hidden.style.visibility = "none";
    hidden.style.display = hidden.style.display === 'block' ? 'none' : 'block';
    button.innerHTML = button.innerHTML === 'Show' ? 'Hide' : 'Show';
}

//bind the event handling functions
[].forEach.call( document.querySelectorAll('.showHide'), function(el) {
   el.addEventListener('click', function() {
     toggleDisplay(el);
  }, false); 
});

* Note: this code won’t work on older browsers

[Alen]

I do not want to have blank spaces on my page.

Modify toggleDisplay function and add el.style.display = 'block'; and el.style.display = 'none';

Here’s our function now:

function toggleDisplay(el) {
  if ( el.style.visibility === 'hidden') {
    el.style.visibility = 'visible';
    el.style.display = 'block';
  }
  else {
    el.style.visibility = 'hidden';
    el.style.display = 'none';
  }
}

In CSS (this bellow is not required for code to run, its for explanation purposes only)

// hides element, does not maintain layout
.hidden {
  display: none!important;
  visibility: hidden;
}

// hides element, maintains layout
.invisible {
  visibility : hidden;
}

[cyclingg]

Hi Alen.

Thank you very much with your help.
I have not used “addEventListener” very much yet and whenever I see the “el”, I forget what it means.

I would like to confirm one thing. I have 3 buttons on one page. Each button hides/shows their own paragraph. Is it correct that I place an “addEventListener” for each one? This is what I did and it works. But, am I writing this long form again? Is there a shorter way? What happens if you have many buttons (not that you would probably)?

This is what I did:

var txt = document.getElementById(“toggleMe1”);
var txt2 = document.getElementById(“toggleMe2”);
btn = document.getElementById(“showHide1”);
btn2 = document.getElementById(“showHide2”);

//add event listener to our button
btn.addEventListener(“click”, function()
{
toggleDisplay(txt);
toggleButtonText(btn);
})

btn2.addEventListener(“click”, function()
{
toggleDisplay(txt2);
toggleButtonText(btn2);
})

//function toggling visibility
function toggleDisplay(el)
{
if ( el.style.display === “block”)
{
el.style.display = “none”;
}
else
{
el.style.display = “block”;
}
}

//function to toggle text
function toggleButtonText(el)
{
if (el.innerHTML === “Show”)
{
el.innerHTML = “Hide”;
}
else
{
el.innerHTML = “Show”;
}
}

It works. When I click the first button, its paragraph that was hidden, displays. The second paragraph stays hidden. When I click the second button, its paragraph displays and the first paragraph stays as I left it.

When I see the code written and I go through it, I understand it (eventually); but, when I try to write it on my own, often I struggle with it and need help. I never programmed before this course and now I know why.

Once again, thanks for your help.

[Author]

Posts