Javascript show/hide div требует двух кликов

Question

У меня есть код, чтобы показать/скрыть два div на основе щелчка стрелки. Однако второй div требует двух щелчков, прежде чем он скрывается, и стрелка не изменится, как ожидалось. Верхний div работает отлично. Любые предложения о том, что я делаю неправильно, пожалуйста?

EDIT - Благодаря двум плакатам, которые указали на мою ошибку имен в стрелках. Однако после загрузки страницы второй div по-прежнему требует двух щелчков, прежде чем он переключится.

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; 
} 

Вот такой Codepen включая выше : https://codepen.io/anon/pen/yXozYJ

Answer 1

Я знаю, что я немного опоздал с ответом на этот, но У меня есть решение. Есть два вопроса, которые должны быть решены, и они следующим образом:

• Идентификатор последнего div неверно, как указано в ответе СКП.
• Проверка атрибута стиля элемента в методе toggleDiv не учитывает отсутствие атрибута стиля при загрузке страницы.

Что касается первой проблемы, идентификатор должен быть указан probability_inputs_arrow, что устраняет проблему, если стрелка не обновляется при ее переключении. Тем не менее, второй вопрос требует немного больше объяснения ...

При загрузке страницы CSS предоставляется к элементам с идентификаторами probability_inputs и start_conditions, что дает им как значение отображения ни одного. При нажатии на любую из этих стрелок вы извлекаете атрибуты стиля целевого элемента и проверяете свойство отображения , которое при загрузке страницы пуст. Вот почему для достижения желаемого поведения требуется два щелчка, потому что первый щелчок фактически просто устанавливает это значение в инструкции else.

Вот ссылка на обновленную Codepen, который содержит исправления: https://codepen.io/anon/pen/oweELy

Answer 2

Вторая стрелка элемент должен иметь probability_inputs_arrow как идентификатор и не probability_arrow, так как вы строите свой идентификатор в функции, как id + '_arrow' и проходите 'probability_inputs'.

Answer 3

на самом деле вы получаете ошибки здесь

Второй элемент должен иметь иметь probability_inputs_arrow как идентификатор, а не probability_arrow,