WN - Visa / Dölj DIV

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Visa / Dölj DIV (https://www.wn.se/forum/showthread.php?t=1044019)

Visa / Dölj DIV

Jag har fastnat på en riktigt "simpel" grej.... problem:

1. Jag vill ha en img-knapp "translate".
2. När jag klickar på den så ska divven med google översätt visas strax under.
3. När jag klickar på "translate" så ska google översätt döljas.

Jag har testat några olika varianter men det verkar stöpa på att google översätt är en div och inte simpel text... har någon några tips?

Citat:

Ursprungligen postat av col (Inlägg 20371002)

http://www.scotiasystems.com/blog/we...nt-on-a-click/

Tack men det här exemplet har ju två knappar... jag vill ha en knapp med visa/dölj.

Jag är funktionen på spåret, exemplet nedan döljer och visar google översätt onclick men hur döljer jag google-elementet från början?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hide_menu(id){
document.getElementById(id).style.display = "none";
}
function show_menu(id){
document.getElementById(id).style.display = "block";
}

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'sv',
layout: google.translate.TranslateElement.InlineLayout.SIM PLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
<body>
<a href="#" onclick="if (document.getElementById('google_translate_element ').style.display=='none') show_menu('google_translate_element'); else hide_menu('google_translate_element');"><img src="png/translate.png"></a>

<div id="google_translate_element"></div>
</body>
</html>

jquery!!

$('#id').toggle();

http://api.jquery.com/toggle/

Du kan lägga till style="display:none" på div-taggen så döljs den från start.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hide_menu(id){
document.getElementById(id).style.display = "none";
}
function show_menu(id){
document.getElementById(id).style.display = "block";
}

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'sv',
layout: google.translate.TranslateElement.InlineLayout.SIM PLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
<body>
<a href="#" onclick="if (document.getElementById('google_translate_element ').style.display=='none') show_menu('google_translate_element'); else hide_menu('google_translate_element');"><img src="png/translate.png"></a>

<div id="google_translate_element" style="display:none"></div>
</body>
</html>

Precis som hnn skriver, jQuery!

Kod:

$('#id').toggle();

Faktum är att ockelbo.se har det jag vill ha.

1. Klicka på translate, välj språk
2. Sajten blir i valt språk
3. Språkväljaren FÖRSVINNER när man valt språk.
4. Valda språket bibehålls när man klickar på länkar.

Jag har dammsugit den sajten på upplysningar men efter x antal timmar hajar jag fortfarande inte.

Det verkar ju som att ockelbo.se laddar OM sidan efter valet och på så sätt får bort google translatemenyn.