How do i show hide a multilang div?

Discussion in 'jQuery' started by 123GoToAndPlay, Jul 19, 2011.

0
  1. #1
    Hi 2 all,

    How can i simple show hide a language div in combo with a slider?

    At the moment i have an image slider on top and a corresponding div text. Now the div text has two languages span's (de /en). Span en has a display: none; at first.

    i have tried the following
    
   $(window).load(function() { 

      $('#recipes').orbit({
		timer: false,  
		bullets: true,
		captions: true, 	
		afterSlideChange: textSlides
	  });
	    $('#nl').click(function() {
			var theId = "." + $(this).attr('id');
			alert(theId);
			$(theId).toggle().show();
			//$('.de').toggle();
			//$('.en').toggle();
			//$('#langde').hide();
			//$('#langen').show();

	  });
	  	$('#en').click(function() {
			var theId = "." + $(this).attr('id');
			alert(theId);
			$(theId).toggle().show();
	  });
	 
   });
   
   function textSlides() {	
		var theId = "#d" + $(this).attr('id');
		$(theId).toggle().siblings().hide()
	  }
    Code (markup):
    Any ideas?
     
    123GoToAndPlay, Jul 19, 2011 IP
  2. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #2
    I'm not 100% sure what you're trying to do. I assume you just want to toggle on/off which span is showing? If that's the case you can do something like this:

    
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#show-english").click(function() {
                $("span.english").toggle();
                $("span.dutch").toggle();
            });
            
            $("#show-dutch").click(function() {
                $("span.english").toggle();
                $("span.dutch").toggle();
            });
        });
    </script>
</head>
<body>
<button id="show-english">en</button>
<button id="show-dutch">de</button>
<div>
    <span class="english" style="display: none">Hello</span>
    <span class="dutch">Halo</span>
</div>
</body>
</html>
    Code (markup):
     
    freelancewebaz, Aug 4, 2011 IP