CODEWITHSUNDEEP
jqueryhtml
Daniel Brownlow
Daniel Brownlow

Reputation: 37

Showing a div depending on flag image clicked

So at the moment I have 4 different flags which I want to show one of four divs. For example, if I click the French flag, I want to show the French content, and hide the other language divs etc.

At the moment I have four flags with the IDs of french, german, english and dutch and when the are clicked, I get the ID of the flag which was clicked and use that name to toggle the div that I want shown.

$("img").click(function () {
 var myClass = $(this).attr("id");

   $('div.' + myClass).toggle();

 });
});

The associated classes of the divs are also called english, dutch, german and french.

The problem I'm having is being able to hide the divs that I haven't clicked as I get a page full of four divs!

Thank you.

Upvotes: 0

Views: 539

Answers (3)

mekwall
mekwall

Reputation: 28974

You're basically looking for a simple tab functionality, so I'd rethink your markup and use classes to define both the flags and the languages. Like this:

HTML

<div class="flag english" data-language="english">E</div>
<div class="flag dutch" data-language="dutch">D</div>
<div class="flag german" data-language="german">G</div>
<div class="flag french" data-language="french">F</div>

<article class="language english show">
    English content
</article>
<article class="language dutch">
    Nederlandse inhoud
</article >
<article class="language german">
    Deutsch Inhalt
</article>
<article class="language french">
    Contenu en français
</article>

JavaScript

var langs = $(".language");
var flags = $(".flag");
flags.on("click", function(e){
    var lang = $(this).data("language");
    langs.filter(".show").removeClass("show");
    langs.filter("." + lang).addClass("show");
});

See test case on jsFiddle.

Upvotes: 1

picios
picios

Reputation: 250

try something like this

<div class="english lang">...</div>
<div class="german lang">...</div>

$("img").click(function () {
   var myClass = $(this).attr("id");
   $('div.lang').hide();
   $('div.' + myClass).show();
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

if the classes are called fixed and called english, dutch, german and french then

var $divs = $('.english, .dutch, .german, .french');
$("img").click(function () {
    var myClass = this.id;
    var $div = $('div.' + myClass).toggle();

    $divs.not($div).hide()

 });
});

another solution is to add another class called flag to all the 4 divs like <div class="flag english">...</div> then

var $divs = $('.flag');
$("img").click(function () {
    var $div = $divs.filter('.' + this.id).toggle();
    $divs.not($div).hide()

 });
});

Upvotes: 1

Related Questions