How to hide extra contents of tabs on page load?

Question

css

I can be a little wrong with the correctness of the question, but the essence is as follows:
When the page is loaded, the contents of all tabs are displayed, and this is not very good, and subsequent tab navigation works fine, the extra content is hidden in display: none. It only needs 1 active tab with content on page load.

HTML

<select id="test">
 <option value="0">Первая</option>
 <option value="1">Вторая</option>
 <option value="2">Третья</option>
 <option value="3">Четвертая</option>
</select>

<div id="test_hide0" class="tab_select">Первое содержимое</div>
<div id="test_hide1" class="tab_select ">Второе содержимое</div>
<div id="test_hide2" class="tab_select">Третье содержимое</div>
<div id="test_hide3" class="tab_select">Четвертое содержимое</div>

JAVASCRIPT

$(window).load(function(){
$('#test').change(function() {
 value = $(this).find('option:selected').val();
   
 $('div[id^="test_hide"]').hide();
 $('#test_hide'+value).show();
});
});

But in general, I would like to see examples of tabs with a drop-down list and clicking on the content, like here. Only with smooth transitions to Query. How many did not look for nothing, if anyone knows, please show. Thanks

Answer 1

Regarding the first part of the question: the fact is that in the script you only bind the function to the event, but this event does not fire on its own when the page is loaded. For a solution, for example, you can call the event yourself:

$(window).load(function(){
  $('#test').change(function() {
    var value = $(this).find('option:selected').val();
    $('div[id^="test_hide"]').hide();
    $('#test_hide'+value).show();
  });

  $('#test').change();
});

There is also the second part of the question: the approach is a little unclear, why are these tabs? If it's tabs, then why switch via select? In general, there are quite a lot of solutions for tabs on jQuery, there is also jQuery UI .