I am trying to display various Divs related to what type of language the user clicked
I have 3 different flags "Eng" "Bulg" "Grece" and I have 2 Divs by default, the first Div is "FadedIn" when "LinkButton17" is clicked, but now I want to display the second Div "tableEng" if user pressed "Eng" or "Grece" before so I tried this but it doesn't work. The second Div "tableEng" is not FadeIn, if I pressed "Eng" or "Grece" before, LinkButton17 is inside the update panel and has
<script>
$(document).ready(function () {
sessionStorage.setItem('index', '1');
$("#Eng , #Grece").click(function () { sessionStorage.setItem('index', '2'); });
$("#Bulg").click(function () { sessionStorage.setItem('index', '1'); });
$("#LinkButton17").click(function () {
$("#text").html = ("");
if (sessionStorage.getItem('index') == '1') {
$("#table").fadeIn(1000);
$("#tableEng").fadeOut(1000);
}
else {
$("#tableEng").fadeIn(1000);
$("#table").fadeOut(1000);
}
});
});
</script>
These OnClick events are server side and change the text on the web page. HTML:
<asp:ImageButton runat="server" ID="Eng" style="position:absolute;top:1vh;left:88vw;width:24px;height:12px;border:1px solid black;" ImageUrl="~/Logos/Uk_union_flag.png" OnClick="Eng_Click"/>
<asp:ImageButton runat="server" ID="Bulg" style="position:absolute;top:1vh;left:83vw;width:24px;height:12px;color:white;font-size:20px;text-align:center;text-decoration:none;border:1px solid black;" ImageUrl="~/Logos/bulgeria-flag.gif" OnClick="Bulg_Click"/>
<asp:ImageButton runat="server" ID="Grece" style="position:absolute;top:1vh;left:93vw;width:24px;height:12px;color:white;font-size:20px;text-align:center;text-decoration:none;border:1px solid black;" ImageUrl="~/Logos/greece_flag.png" OnClick="Grece_Click"/>
<div id="table" style="position:absolute;left:22.5vw;width:55vw;top:90.333vh;height:auto;background-color:white;display:none;padding:5px;">
<table style="width:100%;" border="1">
bla bla bla
</table>
<div id="tableEng" style="position:absolute;left:22.5vw;width:55vw;top:90.333vh;height:auto;background-color:white;display:none;padding:5px;">
<table style="width:100%;" border="1">
</table>
</div>
source to share
I'm not sure about the ASP details, But from what I understand, you just want to switch different content containers according to the language the user has chosen.
For this I created a simple example using basic jQuery and css:
//Sets a default language to be shown when the page loads
var chosenLang = "en";
$(document).ready(function() {
//Makes sure all content blocks are hidden, then show the default one
//Notice the 'data-lang' attributes in the html
$("div.content>div").hide();
$("div.content>div[data-lang=" + chosenLang + "]").show();
//On click, simply change the chosen language and again - display the relevant content block accordingly
$("ul.flags>li").click(function() {
$("div.content>div").hide();
chosenLang = $(this).attr("data-lang");
$("div.content>div[data-lang=" + chosenLang + "]").show();
});
});
.flags {
list-style: none;
}
.flags li {
display: inline-block;
height: 15px;
border: 1px solid #e1e1e1;
padding: 3px;
}
.content {
border: 1px solid #e1e1e1;
padding: 15px;
}
.content > div {
display: none; /*Hides all content blocks*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flags">
<li data-lang="en">International</li>
<li data-lang="en">US</li>
<li data-lang="gr">Greece</li>
</ul>
<div class="content">
<div data-lang="en">
English content goes here
</div>
<div data-lang="gr">
Greek content goes here
</div>
</div>
If that doesn't work, create a working version of the jsfiddle code so we can see what is wrong with you.
source to share