coolio83000 coolio83000 - 2 months ago 15
HTML Question

Show/hide jquery click function

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>




Answer

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>