Question

I have a blog in two languages. i want to toggle between language A and B when clicking FlagA.png or FlagB.png. Every post contains at least two flags images. How can I do this using (bootstrap) Jquery? (context, I dont have a DB, in order to facilitate multi languages I want to make use of the toggle functions)

                    <div class="post">
                    <div class="post-content">
                        <div class="post-title"><a href="#"><b>title</b</a>                </div>
                        <a href="" class="languageA">
                                <img src="img/countryA.png" alt=""
                                    style="float: right;" /></a>
                        <a href="" class="languageB">
                                <img src="img/countryB.png"  alt="" style="float: right;
                                    padding-right: 10px;" /></a>
                        </br>
                        <div class="post-description">
                        <p>
                            post in language A
                        </p>
                        </div>
                        <div class="post-description">

                        <p>
                            post in language B but now it is invisible, when pressed countryB image this becomes visible and post in language A not.
                        </p>
                        </div>
                    <p class="test"> test test test test test test test test test test test test</p>
                   </div>
                   <div class="post">
                   <!-- second post\-->
                   </div>
                   <!-- -->
                   <script type="text/jscript">
                  $(function() {
        $('.languageA').click(function () {
            $('.test').collapse({
                toggle: true
            })
        });
    });
                   });
                   </script>

Answer 1

You can do this by the following method:

1. For all the content you want to toggle, you must give it the relevant language class. In the example below, I gave the title, country flag and post description a language class.
2. Use the click function to toggle the content with each language class when clicked. In this example, I limit the toggle to each post by using $(this).parent so you could read one post in one language and another in a different language.
3. Then you also implement a callback in each toggle to show the other language when the toggle has completed.

Here is the HTML:

<div class="post">
    <div class="post-content">
      <div class="post-title languageA"><a href="#"><b>Title 1 in Language A</b></a></div>
      <div class="post-title languageB"><a href="#"><b>Title 1 in Language B</b></a></div>
        <a href="#" class="languageA">
          <img src="http://flags.redpixart.com/img/united_states_of_america_preview.gif" alt=""
          style="float: right;" /></a>
        <a href="#" class="languageB">
          <img src="http://flags.redpixart.com/img/spain_preview.gif"  alt="" style="float: right;
                                    padding-right: 10px;" /></a>
      <br/>
      <div class="post-description languageA">
        <p>
          Post 1 in language A
        </p>
      </div>
      <div class="post-description languageB">
        <p>
          Post 1 in language B
        </p>
      </div>
      <p class="test"> test test test test test test test test test test test test</p>
    </div>
</div>

And then the following JavaScript will toggle the language:

$(function() {
   // Hide Language B when the web page loads
   $('.languageB').hide();
   $('.languageA').click(function () {
       // find all content with .languageA under the div post-content and hide it
       $(this).parent().find('.languageA').fadeToggle('slow',function() {
             // find all content with .languageB under the div post-content and show it
             $(this).parent().find('.languageB').show();});
   });
   $('.languageB').click(function () {
       // find all content with .languageB under the div post-content and hide it
       $(this).parent().find('.languageB').fadeToggle('slow',function() {
             // find all content with .languageA under the div post-content and show it
             $(this).parent().find('.languageA').show(); });
   });
});

JSFiddle is here.