How to show only the first of my 3 div element when I load my page

Question

I have 3 links each opening his own div element, the problem is that when I refresh my page each 3 are visible, and at load I want the first to be shown and then toggle with show and hide functions in jquery between each other

HTML

<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

JS

        $('#showdiv2').click(function(){
            $('div[id^=div]').hide();
            $('#div2').show();
        });

        $('#showdiv3').click(function(){
            $('div[id^=div]').hide();
            $('#div3').show();
        });

        $('#showdiv4').click(function(){
            $('div[id^=div]').hide();
            $('#div4').show();
        });

add style="display:none" to the elements that you want to hide on page load. — Kathara, Aug 25 '17 at 10:50
and you'll probably have to use Prevent default in the click function because you're using a-tags. and I believe it's better to use .on("click", function() instead of .click(function() . see here: https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click — Kathara, Aug 25 '17 at 10:51

Rory McCrossan · Answer 1 · 2017-08-25T11:44:20.823

3

You can hide all but the first element in the set by using CSS. You can also DRY up your logic to use a single event handler by using common classes along with putting the selector to target in the href attribute. Try this:

$('.button').click(function(e) { 
  e.preventDefault();
  $('.div').hide().removeClass('active')
    .filter($(this).attr('href')).show().addClass('active');
});

.div ~ .div {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="button" href="#div2">Div 2</a>
<a class="button" href="#div3">Div 3</a>
<a class="button" href="#div4">Div 4</a>
<div class="div active" id="div2">2</div>
<div class="div" id="div3">3</div>
<div class="div" id="div4">4</div>

edited Aug 25 '17 at 11:44

answered Aug 25 '17 at 10:52

Rory McCrossan

331,213
40
305
339

I've never used this before: ".div ~ .div" what does it do? – Kathara Aug 25 '17 at 10:59
2

`~` is the general sibling selector: https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors – Rory McCrossan Aug 25 '17 at 11:00
Why do you use .click instead of .on? – Kathara Aug 25 '17 at 11:02
1

Either is fine. – Rory McCrossan Aug 25 '17 at 11:03
@Rory great DRY code, nice...but now I have one more thing to do, I wish to move class 'current' between div elements to know wich of them is in active state... – Aug 25 '17 at 11:08
This is a nice solution and should be the accepted answer! @MarkoC, regarding a current-class: check jQuery toggleClass here: http://api.jquery.com/toggleclass/ – konrad_pe Aug 25 '17 at 11:10
Actualy it didn't, I manage to add class current to element that got clicked, but class stays on the element where already has been added, sorry I am newbie so just strated to lear 3 months ago, sorry guys, I know this is like riding a bike for you but as I said I am just strating out... – Aug 25 '17 at 11:43
Ah, ok. You can use `addClass()` and `removeClass()` to do it - I updated the answer for you – Rory McCrossan Aug 25 '17 at 11:44

score 1 · Answer 2 · answered Aug 25 '17 at 10:51

1

Fiddle: https://jsfiddle.net/afg8qn0j/

(function() {
    $('#div3').hide();
    $('#div4').hide();
 })();

This script block is loaded once the DOM is ready loaded. It hides your #div3 and #div4 initially.

answered Aug 25 '17 at 10:51

konrad_pe

1,189
11
26

How to show only the first of my 3 div element when I load my page

2 Answers2