Lautaro Cuello Lautaro Cuello - 4 months ago 17
HTML Question

Prevent click without function

Today I was pseudo-coding a we and then I tried to make a hide/show content function for mobile browser.

The problem is (not my hardcoded thing), it's the delay of the button to hide or show content and I think it's because it's not previously initialized.


<article id="horarios">
<h2>Horarios <a onclick="showContent(," class="showContentBtn" id="showContentBtnHr">&#xe808;</a></h2>
<span id="hide-horarios">

About my hardcode thing I just make that "parent, parent id" (Horarios) concat with "hide-", I don't know a better solution now but in some way it's ok.

Now here's the problem:


function showContent(value, value2){
var value="hide-"+value;
var content = document.getElementById(value).style.display;
if(content == "none"){
document.getElementById(value).style.display = "block";
document.getElementById(value2).innerHTML = "&#xe809;";
document.getElementById(value).style.display = "none";
document.getElementById(value2).innerHTML = "&#xe808;";


#hide-programas, #hide-horarios, #hide-aboutus{
display: none;

When I test it, I have to click one time and it do nothing then it works.
I think this is because "content" not have any value on it to compare so there's nothing to do the first time and then it have a value.

It's possible to fix it? I know it will hurt your eyes but this weird sh*t works in some way.


This is best fixed by hiding and showing using a class rather than direct access to DOM properties. Below is just a brief example, e.g.

function toggleClass(id, className) {
  var el = document.getElementById(id);
  if (el && el.classList && el.classList.toggle) {
<head><style type="text/css">
  .hidden {
    display: none;

  <div class="hidden" id="d0">I'm a div</div>
  <button onclick="toggleClass('d0','hidden')">Toggle div</button>

It's not too hard to support browsers that don't support the classList object if you need to go back that far (IE 9 and lower).