Cмена div'ов в зависимости от кнопки radio

[d1mka21]

Подскажите, у меня есть выпадающий список, и в нем выбираются кнопки radio, как сделать что в зависимости от выбранного менялся div c нужным id? https://jsfiddle.net/d1mka21/673bb94L/

Я делал кое как, под две кнопки, а если у меня их больше двух, что-то никак не получается(((

$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
}
else{
$('#one').hide();
$('#two').show();
}
});
});

Спасибо!

[ksa]

а если у меня их больше двух

Использовать классы.
Нужно будет:
- Спрятать все однотипные
- Открыть нужный

[d1mka21]

ksa,
а не подскажите, есть где то образец кода js такого плана?!

[ksa]

есть где то образец кода js такого плана?

рони всегда советовал сделать поиск по слову "открывашка".

Проверь, есть там чего?
http://javascript.ru/forum/search.php?searchid=58003

[d1mka21]

ksa,
ахха)))
спасибо буду шуршать в темах))) надеюсь, что-то да найду))

[рони]

d1mka21,
Открывашка 212 input type=radio

[d1mka21]

рони,
Попробовал такую "открывашку", но руки у меня вообще не от туда, походу)) т.к. js не сильно силен((

<div id="one" class="row">
          <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
            <div id="vehicle-nav-container">
              <div id="length" class="wrapper-dropdown-3" tabindex="1">
          	   <span>Длина</span>
              	<ul class="vehicle-nav">
                  <input id="1str1metr" type="radio" value="one" name="length" checked="checked">
                    <label for="1str1metr">
                      <li class="active">
                        <a href="#vehicle-1"><i class="icon-envelope icon-large"></i>1 метр</a>
                      </li>
                    </label>
                  <input id="1str2metra" type="radio" value="one" name="length">
                    <label for="1str2metra">
                      <li class="active">
                        <a href="#vehicle-2"><i class="icon-envelope icon-large"></i>2 метра</a>
                      </li>
                    </label>
                  <input id="1str3metra" type="radio" value="one" name="length">
                    <label for="1str2metra">
                      <li class="active">
                        <a href="#vehicle-3"><i class="icon-envelope icon-large"></i>3 метра</a>
                      </li>
                    </label>
              	</ul>
               </div>          
  				​  </div>
  				</div>
          <!-- Vehicle 1str end -->

          <!-- Vehicle 1 data start -->
          <div id="Vehicle">
          <div class="vehicle-data" id="vehicle-1" font face="Raleway-ExtraLight" style="display:none">
            <div class="col-md-6 wow fadeIn" data-wow-offset="100">
              <div class="vehicle-img">
              <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title=""><img class="img-responsive" src="http://noviyhudozhnik.ru/img/metal_shelf/1str/1str1metr.JPG" alt="Vehicle"></a>              
              </div>
            </div>
            <div class="col-md-3 wow fadeInUp" data-wow-offset="200">
              <div class="vehicle-price">20000 ₽ <span class="info">&nbsp;<font face="Raleway-ExtraLight">стоимость</font></span></div>
              <table class="table vehicle-features">
                <tr>
                  <td>Масса</td>
                  <td>130,4 кг</td>
                </tr>
                <!-- <tr>
                  <td>Doors</td>
                  <td>4</td>
                </tr>   -->                  
              </table>
              <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
            </div>
          </div>
          <!-- Vehicle 1 data end -->

window.onload = function() {
          var divs = document.querySelectorAll('.active + div'),
              inp = document.querySelectorAll('[name="length"]'),
              fn = function(input) {
                  input.onclick = function() {
                      Array.prototype.forEach.call(divs, function(div, i) {
                          div.style.display = inp[i].checked ? "block" : "none"
                      })
                  }
              };
          Array.prototype.forEach.call(inp, fn);
        }

вроде бы класс, и name кнопки поменял на свои, но все равно не работает(((

Я поставил Вашу Открывашка 234 фильтрация div по id.htm, но она тоже стала не до конца корректно, где-то я напортачил видимо((( Гляньте пожалуйста, http://noviyhudozhnik.ru/

[рони]

d1mka21,

var divs = document.querySelectorAll('.active + div'),

таких элементов у вас в коде нет ... посмотреть не могу ни тут ни там -- локализуйте проблему это - то правильно нашли inp = document.querySelectorAll('[name="length"]'),

[d1mka21]

рони,
да в этих двух строчках я и меняю название class'ов, но все равно не работает, я уже и пробовал название классов ставить такие же, как у Вас в том примере, только вместо тега "p" ставил div, но и с "р" пробовал, но все равно не срабатывает(((

[рони]

d1mka21,
что открыть закрыть хотите какие элементы, хоть строку тут напишите