В чем ошибка кода JavaScript?

Question

[MrGaunt]

JS

function diplay_hide (blockId)    

{ 
  
    if ($(pl).css('display') == 'none') 
        { 
          	document.getElementByClassName("a").style.display = "block"; // не работает
                $(pl).animate({height: 'show'}, 0);   // не работает из-за строки выше
        } 

    else 
        {     
          	document.getElementByClassName("a").style.display = "none";  // не работает
            $(pl).animate({height: 'hide'}, 0);      // не работает из-за строки выше      	
        }}

CSS

.a, #pl {
display: none;
}

HTML

<span onclick="diplay_hide('#pl');return false;">
   <button>Показать / скрыть #pl </button>  <!-- Кнопка, по нажатию на которую блок с  идентификатором -->
</span>   <!--  #pl появляется и исчезает (работает) -->

<div id="pl">Блок 1.</div>
<div class="a">Блок 2</div> <!-- Блок, который должен появляться вместе с #pl -->

По плану, я нажимаю на кнопку и появляются блок с id #pl и классом .a
С идентификатором всё работает как надо, но с классом проблемы.
В JS не разбираюсь...

Answer 1

[Алексей Уколов]

Вместо document.getElementByClassName("a") должно быть document.getElementsByClassName("a")[0]. Но если таких блоков на странице несколько, то работать этот код корректно не будет. Посмотрите варианты решения вашей задачи здесь.

А вообще, вы либо трусы наденьте, либо крестик снимите:

$('span').on('click', function () {
    var $el = $(this),
        targetID = $el.data('target-id'),
        $target = $('#' + targetID);

    $target.toggle()
        .next('.a')
        .toggle();
});

Comments

[MrGaunt]

Огромное спасибо, действительно нужно было одеть трусы.
Ваше решение полностью подошло.