Как создать простой переключатель состояния кнопок?

Question

[Alisa94]

Помогите пожалуйста.

Нужен простой переключатель состояния кнопок на чистом JS.

Например есть 4 кнопки, первые две должны быть видимыми, а последние две должны быть скрытыми. Есть так же две кнопки для переключения "вперёд" и "назад".

Нужно, чтобы во время нажатия на кнопку "вперёд", если текущая кнопка, например кнопка "Button Visible One", является видимой, то она так и оставалась видимой, а если является скрытой, например мы дошли до кнопки Button Hidden One, то она должна появиться внизу двух видимых кнопок, т.е. внизу Button Visible One и Button Visible Two.

При переключении на 4 кнопку - 3 должна скаться(т.е. при переключении с Button Hidden One на Button Hidden Two, Button Hidden One должна скаться), а 4 появиться на его месте. При переключении с первой кнопки на последнюю с помощью кнопки "назад", внизу 2 видимых кнопок должна появиться 4 невидимая кнопка, т.е. внизу Button Visible One и Button Visible Two должна появиться Button Hidden Two.

Любая помощь будет полезна, заранее спасибо.

// Cписок с кнопками 
<ul>
    <li><button class="btn"/>Button Visible One</li> 
    <li><button class="btn"/>Button Visible Two</li> 
    <li><button class="btn"/>Button Hidden One</li> 
    <li><button class="btn"/>Button Hidden Two</li>
</ul> 

// Кнопки для передвижения 
<button id="previous">Previos</button>  
<button id="next">Next</button>

Answer 1

[Юрик Булкин]

Так?

Comments

[Alisa94]

Спасибо большое брат, я этот вопрос уже сто раз задавал, а ответа по душе не получал. Очень благодарен!

[Alisa94]

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

[Юрик Булкин]

Alisa94,

if( k == btn_sw_data.current ) {
    ...  
    // el.name - Имя текущей кнопки
   document.getElementById('my_div').innerText = el.name;
 }

[Alisa94]

Юрик Булкин, Спасибо брат!