Show/hide jquery click function

Question

I have a problem with my code, I don't know why it doesn't work. My goal is to have my default:

EN div with only #en div visible, FR & DE id must be hidden by default. When we click on FR or DE, we have only #fr or #de visible and the rest hidden.

HERE IS MY JSFIDDLE

HERE IS MY CODE:

    $('#en').click(function(){
    $('fr[id^=fr], de[id^=de]').hide();
    $('#en1, #en2').show();
    });

    $('#fr').click(function(){
    $('en[id^=en], de[id^=de]').hide();
    $('#fr1, #fr2').show();
    });

    $('#de').click(function(){
    $('fr[id^=fr], en[id^=en]').hide();
    $('#de1, #de2').show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button" id="en">EN</a>
    <a class="button" id="fr">FR</a>
    <a class="button" id="de">DE</a>
    <div id="en1">1</div>
    <div id="fr1">2</div>
    <div id="de1">3</div>
    <div id="en2">4</div>
    <div id="fr2">5</div>
    <div id="de2">6</div>

By adding <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> on top of your html. Here is source of this — Jakub Jankowski
– Jakub Jankowski, Commented Sep 21, 2016 at 16:21

Момчил Джамбазов · Accepted Answer · 2016-09-21 16:58:51Z

2

Here is a jsfiddle of how I think should this code work: http://jsfiddle.net/MJambazov/tdeotges/1/

Try to follow the DRY principle, it will make your code more readable for humans.

$(document).ready(function() {
  $('.lan').hide();
  $('.en').show();
});

$('.button').click(function(event) {
  $('.lan').hide();
  var selectedLanguage = $(this).attr('id');
  var setActiveLanguage = "." + selectedLanguage;
  $(setActiveLanguage).show();
});

answered Sep 21, 2016 at 16:58

Момчил Джамбазов

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gaetanoM · Accepted Answer · 2016-09-21 16:30:41Z

1

Your error is repeated in your selectors like:

$('fr[id^=fr], de[id^=de]')

This must be changed to:

$('div[id^=fr], div[id^=de]')

In order to have as default the en only visible it is enough to append to the click event a trigger click.

The snippet and updated fiddle:

$('#en').click(function(){
  $('div[id^=fr], div[id^=de]').hide();
  $('#en1, #en2').show();
}).trigger('click');

$('#fr').click(function(){
  $('div[id^=en], div[id^=de]').hide();
  $('#fr1, #fr2').show();
});

$('#de').click(function(){
  $('div[id^=fr], div[id^=en]').hide();
  $('#de1, #de2').show();
});

.button { cursor:pointer; padding: 0px 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="button" id="en">EN</a>
<a class="button" id="fr">FR</a>
<a class="button" id="de">DE</a>


<div id="en1">1</div>
<div id="fr1">2</div>
<div id="de1">3</div>
<div id="en2">4</div>
<div id="fr2">5</div>
<div id="de2">6</div>

edited Sep 21, 2016 at 16:30

answered Sep 21, 2016 at 16:22

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

coolio83000 Over a year ago

you are totally right I understand my error, thanks a lot that's exactly what i was looking for ;D you rock

inoabrian · Accepted Answer · 2016-09-21 16:27:48Z

So in your fiddle you were missing jQuery like the comments mentioned above. First, in order to have a default you need to add a hidden class.

.hidden {
  display:none;
}

This will allow you to set the default hidden tags.

<a class="button" id="en">EN</a>
<a class="button" id="fr">FR</a>
<a class="button" id="de">DE</a>

<div id="en1">1</div>
<div class="hidden" id="fr1">2</div>
<div class="hidden" id="de1">3</div>
<div id="en2">4</div>
<div class="hidden" id="fr2">5</div>
<div class="hidden" id="de2">6</div>

You were also pointing to the incorrect selectors you were pointing to fr[id^=fr] and same for the others. You should replace that with div[id^=country].

$('#en').click(function(){
   $('div[id^=fr], div[id^=de]').hide();
   $('#en1, #en2').show();
});

$('#fr').click(function(){
   $('div[id^=en], div[id^=de]').hide();
   $('#fr1, #fr2').show();
});

$('#de').click(function(){
   $('div[id^=fr], div[id^=en]').hide();
   $('#de1, #de2').show();
});

Collectives™ on Stack Overflow

Show/hide jquery click function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related