Javascript-форум - Смена div по клику

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Смена div по клику (https://javascript.ru/forum/jquery/67485-smena-div-po-kliku.html)

Смена div по клику

Доброго всем! Есть такой пример, отлично работает, но только с одной парой div:

<div id="left"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right"><span>Правый - Левый</span><span>Поменять</span></div>

$(function(){

    $('#right').hide();
    $('div').click(function(){
        $('div').toggle();
    });

});

Проблема в том, что нужно применить эту функцию к группе div с разными id, чтобы при клике по "Поменять" менялась только группа с одинаковым индексом в id:

<div id="left-1"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right-1"><span>Правый - Левый</span><span>Поменять</span></div> 
<div id="left-2"><span>Левый - Правый</span><span>Поменять</span></div>  
<div id="right-3"><span>Правый - Левый</span><span>Поменять</span></div> и т.д.

Ну или может есть другой вариант, спасибо.

Цитата:

Сообщение от kingstakh

может есть другой вариант

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.check:checked ~ .right {
    display:  inline-block;
  }
.check ~ .right, .check:checked ~ .left, .check{
    display: none;
  }

  </style>

</head>

<body>
<label>
    <input class="check" type="checkbox" name="test">
    <span class="left">Левый - Правый</span>
    <span class="right">Правый - Левый</span>
    <span>Поменять</span>
</label>


</body>
</html>

Здорово! Спасибо! А есть ограничения по браузерам и версиям?

Цитата:

Сообщение от kingstakh

А есть ограничения по браузерам и версиям?

Селектор "~" не будет работать на старье... CSS3 only. :)
http://htmlbook.ru/css/selector/sibling

Цитата:

Сообщение от kingstakh

или может есть другой вариант

textToggle