Laravel 5 как показать, скрыть div с помощью выпадающего списка

Question

Проблема в том, как показать и скрыть div, используя выпадающую функцию onclick.

Blockquote Проблема 2 в том, как получить getElementById ("") по номеру этого стиля;

Это мой CSS, и я хочу показать не все мои div

<style>
#\1a{ display:none; }      // to 32...//
</style>

Это мой JS

<script>
  function show(showid){
    document.getElementById("1").style.display="none";
    document.getElementById("2").style.display="none";
    document.getElementById("3").style.display="none";
  }
</script>

Это мой выпадающий список

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" >
      Bla bla bla
  </button>
<ul id="test" name="form_select" class="dropdown-menu">
@foreach ($topics as $topic)
    <li><a href="#" onclick="show('')" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
@endforeach
</ul>
</div>

Это мой div

@foreach($collections as $collection)
<div id="{{ $collection->id }}">
    <div class="panel panel-default">
        <table border="1" style="width:100%">
            <tbody>
                <tr>
                    <td><h4>Асуулт {{ $i++ }}.</h4><strong>{!! nl2br($question->question_text) !!}</strong></td>
                </tr>
                <tr>
                    <td><input type="hidden" class="form-control" name="questions[{{ $question->id }}]" value="{{ $question->id }}"></td>
                </tr>
                    @foreach($question->options as $option)
                <tr>
                    <td><label class="radio-inline"><input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">{{ $option->option }}</label>
                </td>
                </tr>
                    @endforeach
               </tbody>
        </table>
    </div>
</div>

Answer 1

Раскрывающийся список:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Bla bla bla
    </button>
    <ul id="test" name="form_select" class="dropdown-menu">
        @foreach ($topics as $topic)
            <li><a href="#" onclick="show({{ $loop->index }})" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
        @endforeach
    </ul>
</div>

Мы используем $loop->index в качестве дополнительного значения.Они должны быть равны $collection->id.

DIV:

@foreach($collections as $collection)
    <div id="{{ $collection->id }}" class="topic hidden">
        <div class="panel panel-default">
            ...
        </div>
    </div>
@endforeach

Я добавил класс topic для идентификации всех divs (используйте любойхотите) и спрячьте их всех с помощью класса hidden.Нет необходимости в пользовательских CSS.

JavaScript:

function show(id) {
    $('.topic').addClass('hidden');
    $('#' + id).removeClass('hidden');
}

В первой строке добавляется класс hidden ко всем divs, чтобы скрыть их,Второй удаляет класс hidden для конкретного div.
Я использовал jQuery, поскольку вы используете эту библиотеку для Bootstrap.

Все это предполагает, что $loop->index и $collection->id имеют одинаковые значения.Если нет, вы можете попробовать заменить $collection->id на $loop->index.