Toggle icon flips независимо от того, какой раздел открыт

Я новичок во всем этом, поэтому, пожалуйста, извините за любое неправильное использование условий.Toggle icon flips независимо от того, какой раздел открыт

Я добавил переключатель на мой сайт Wordpress, чтобы скрыть длинные разделы текста, и, похоже, он работает нормально.

Я хотел добавить стрелку, которая переворачивается в зависимости от того, открыт ли раздел или нет. Моя проблема заключается в том, что стрелка переворачивается назад и вперед независимо от того, какой раздел переключается, и я не знаю, как это исправить.

JS:

function toggle(id) { 
var element = document.getElementById(id); 
var text = document.getElementById("arrow"); 
if (element) { 
    var display = element.style.display; 

    if (display == "none") { 
     element.style.display = "block"; 
     text.innerHTML = "&#9650;"; 

    } else { 
     element.style.display = "none"; 
     text.innerHTML = "&#x25bc;"; 
    } 
} 
}

HTML:

<h4>Procedure</h4> 
<h4 onclick="toggle('telnetPrint')">Telnet<a id="arrow">&#x25bc;</a></h4> 
<div id="telnetPrint" style="display: none;"> 
<ol> 
<li>fjkldsaj;lkf</li> 
</ol> 
<h4 onclick="toggle('telnetPrint')">Hide -</h4> 
</div> 
<p> </p> 
<h4 onclick="toggle('linuxPrint')">Linux Computer&#x25bc;</h4> 
<div id="linuxPrint" style="display: none"> 
<ol> 
<li>fjkldsjfklsa</li> 
</ol> 
<h4 onclick="toggle('linuxPrint')">Hide -</h4> 
</div>

Если кто-то может помочь, я очень ценю это.

p.s. no jQuery пожалуйста

источник

2016-08-18 Erin

Должна быть стрелка для каждой секции? Похоже, есть только одна стрелка из того, что я вижу. – stevenelberger

Да, для каждой секции должна быть стрелка. Я просто забыл изменить вторую, прежде чем опубликовать это. – Erin

Я вижу. Никто не разрешал эту проблему? Если один из ответов работал, вы должны отметить его как принятый. – stevenelberger

Похоже, вы вызываете ту же «стрелу». У вас есть только стрелка для Telnet. Вы также можете добавить стрелку в linuxPrint. Я бы их как ID:

<a id="arrowtelnetPrint"></a>

<a id="arrowlinuxPrint"></a>

Таким образом, вы можете использовать "идентификатор", чтобы изменить правильный. Вот jsfiddle:

https://jsfiddle.net/ezdrhLtr/2/

Это будет иметь полный код, с незначительными изменениями, что переключать обе стрелки.

источник

2016-08-18 20:22:46

Кроме того, это чистый js. –

Большое вам спасибо; Я был полностью в тупике. Ты спасатель! – Erin

var text = document.getElementById("arrow"); Вы ссылаетесь на элемент с id 'стрелка'. Каждый раз, когда выполняется функция переключения, вы поворачиваете элемент с помощью id «стрелка». Что вы можете сделать, это передать логическое значение, чтобы знать, если его необходимо перевернуть или не

<h4 onclick="toggle('telnetPrint',true)">Telnet<a id="arrow">&#x25bc;</a></h4>

и в сценарии

function toggle(id, flipOrNot) { 
var element = document.getElementById(id); 
var text = document.getElementById("arrow"); 
if (element) { 
    var display = element.style.display; 

    if (display == "none") { 
     element.style.display = "block"; 
     if(flipOrNot){ 

      text.innerHTML = "&#9650;"; 
     } 

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

      text.innerHTML = "&#x25bc;"; 
     } 
    } 
} 
}

для других элементов, вы можете сделать

<h4 onclick="toggle('linuxPrint',false)">Hide -</h4>

для предотвращения флип

источник

2016-08-18 20:26:00

Toggle icon flips независимо от того, какой раздел открыт

ответ

Смежные вопросы