Javascript show/hide div requires two clicks

javascript show/hide div on click
javascript onclick only works on second click
javascript show/hide div onclick toggle
css show/hide div on click
onclick show div and hide other div
hide and show div using javascript with example
hide and show textbox using javascript
show hide div on link click

I've got code to show/hide two divs based upon the clicking of an arrow. However, the second div requires two clicks before it hides and the arrow doesn't change as expected. The top div works perfectly. Any suggestions about what I'm doing wrong, please?

EDIT - Thanks to the two posters who have pointed out my naming error in the arrows. However, after loading the page, the second div still requires two clicks before it toggles.

HTML

<div id="start_conditions_arrow" class="arrow_down" onclick="toggleDiv('start_conditions')"></div>
<h2>Starting Conditions</h2>

<div id="start_conditions">
    <%= render :partial => 'start_conditions', :object => @page.start_conditions %>
</div>

<div id="probability_arrow" class="arrow_right" onclick="toggleDiv('probability_inputs')"></div>
<h2>Probability Inputs</h2>

<div id="probability_inputs">
    <%= render :partial => 'probability_inputs', :object => @page.probability_inputs %>
</div>

Javascript

var toggleDiv = function(id){
var tag = document.getElementById(id).style;
    if(tag.display == 'none'){
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
    } else {            
        document.getElementById(id).style.display='none';
        document.getElementById(id + '_arrow').className='arrow_right';
    }
};

CSS

.arrow_down, .arrow_right {
    width: 0; 
    height: 0;
    margin: 12px 12px 0 0;
    float: left;
    cursor: pointer;
}

.arrow_down {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #d5d5d5;
}

.arrow_right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #d5d5d5;
}

#probability_inputs {
    display: none;
}

#start_conditions {
    display: none;
}

Here's a Codepen including the above: https://codepen.io/anon/pen/yXozYJ

Toggle Javascript works on second click, not first - JavaScript, Toggle Javascript works on second click, not first · JavaScript code in the head: <script language="javascript"> function toggleDiv(divid){ if(document. Does this mean I need to post this over in a CSS forum instead? Thanks again. To hide a div when the user clicks outside of it, try to run the following codeExampleLive Demo<!DOCTYPE html>

The second arrow element should have probability_inputs_arrow as id and not probability_arrow, as you're building its id in the function as id + '_arrow' and you pass 'probability_inputs'.

How to hide div element by default and show it on click using , JavaScript and Bootstrap ? The task is to show a hidden div on click using Bootstrap. There are two methods to solve this problem which are discussed below:. Previous Versions Version 6. if clicked "a" doesn't have a shown div below, but there are other divs shown - hide those divs and show the one attached to this "a". open('[modal id'), e. Previous message: [Javascript] Show and hide multiple div tags Next message: [Javascript] Show and hide multiple div tags Messages sorted by:.

actually you are getting error here

The second element need to have have probability_inputs_arrow as id and not probability_arrow,

Show and hide sections using click or mouse over, How to show and hide sections using click or mouse over in HTML. where you have a button for toggling show/hide, the quick solution is a small JavaScript, that looks like this: The last part we need is the element to be shown and hidden. If you use two buttons instead of one, each with their own function, you can split  I have learned how to show and hide divs using javascript but how do I make the first div show on page load without having to click it? Basically I am creating a menu with 6 different links. I would like the first link div to show on page load and then hide when other links are clicked.

The style.display is set to "" by default when the page loads for the first time, thus it ends up in the else block and then requires a second click to go to the if block. Just add this to your else if statement.

<script>  
  var x = document.getElementById("myDIV"); 
    if (x.style.display == "none") 

     {
   x.style.display = "block";
  }

    else if((x.style.display == 'null')||(x.style.display == ""))
  {
    x.style.display = "block";
  }
  else
  {
    x.style.display = "none";
  }
</script>

WebD2: Using Javascript to Hide and Show Content, UNIT 5 > MODULE 2 In this lesson, you will use CSS and Javascript to show and hide the clock that you've created. Go to the style sheet that you created for div#clock in the previous lesson. Now that you have a button that, when clicked , calls the toggleClock() function, you need to create a toggleClock() function. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

I had this problem and it was due to the default state of the DIV. Even if you set the DIV class value is set display: none, it appears some browser do not accept this state, and therefore it is unknown.

To solve the problem, using your own code, add another condition of default:

 var toggleDiv = function(id){
 var tag = document.getElementById(id).style;
     if(tag.display == 'none')
       {
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
       } 
     else  if(tag.display == 'block') 
      {            
       document.getElementById(id).style.display='none';
       document.getElementById(id + '_arrow').className='arrow_right';
      }
     else
       {
        document.getElementById(id).style.display='block';
        document.getElementById(id + '_arrow').className='arrow_down';
       }

}; `

How to use jQuery to Show/Hide a Form on Click, or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial. JavaScript; HTML; CSS; Result In the jQuery, you need to set up the button to toggle the form to show and hide. See the  In this code snippet we will learn how to show/hide paragraph text inside a div using button click? This example can also be used to slide text on button click, in this example we will use two paragraph text inside a div and will show/hide on button click. JavaScript - Show/Hide Paragraph Text inside Div on Button Click . JavaScript

How to to use CSS together with JavaScript to show hidden content, <p class="flip" onclick="myFunction()">Click to show panel</p> ​ <div id="panel" > <p>This panel contains a div element, which is hidden by default (display:  Using javascript onclick () with two buttons ('show' and 'hide', each in their own DIVs), it would work something like this: By default, the 'show' button is hidden, the main DIV and hide button are displayed Clicking the 'hide' button hides main DIV and 'hide' button itself, displays the 'show' button

Differences between display: none; and visibility , display:none removes the element from the document. It does not take up any space. Box 1. Italy Remove. Box 2. Lights Hide. Box  JavaScript code snippet to show or hide div on button click event using JavaScript, JavaScript code to show/ hide div. A humble request Our website is made possible by displaying online advertisements to our visitors.

.dblclick(), .dblclick( handler )Returns: jQuery event handler to the "dblclick" JavaScript event, or trigger that event on an element. The dblclick event is sent to an element when the element is double-clicked. Double click to toggle background color. $(selector).show(speed,callback); The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

Comments
  • What does the rendered HTML look like?
  • I'm sorry, I can't provide a link to this snippet of an internal Rails app without displaying proprietary internal data. I hope I've provided enough code to determine why it's not functioning as I expect. Please let me know if you need to see any more.
  • Thank you - that explains why the arrow wasn't toggling between pointing down and right. Unfortunately, upon loading the page, I still require 2 clicks in order to toggle the second div.
  • I would change if(tag.display == 'none'){ to if (tag.display != 'block'){.
  • Thanks for the suggestion, but this then switches the "two click error" to the top div.
  • Thank you - that explains why the arrow wasn't toggling between pointing down and right. Unfortunately, upon loading the page, I still require 2 clicks in order to toggle the second div.
  • @LizMacfie Reload your page and before you click the element, inspect it in your console. I wouldn't be surprised if your "display" style isn't set initially, and your else block is running. That would explain the click issue.
  • Both divs have the display style set initially in the CSS, as shown above. Removing these initial settings results in both div toggles requiring two clicks.