How to create an article with "show on demand" part of the text of the article? What I am trying to do is like in the picture.
So I would have an article of same text of multiple language. When I click on the Flag/text link on top of the article, it should show particular part of the text of that language selected. All other texts should be hidden. Is that something easily achievable? Can anyone suggest how to go with it please?
For your use case, there is no module for it. You will need to use custom jQuery

SEE MY DEMO

For Example:

HTML

&lt;span class="french-flag"&gt;
&lt;img src="http://icons.iconseeker.com/png/128/rounded-world-flags/france-flag-2.png"/&gt;
&lt;/span&gt;
&lt;span class="english-flag"&gt;
&lt;img src="http://icons.iconseeker.com/png/128/rounded-world-flags/us-pacific-island-wildlife-refuges.png"/&gt;
&lt;/span&gt;

&lt;br&gt;

&lt;div class="french-text"&gt;
Merci
&lt;/div&gt;

&lt;div class="english-text"&gt;
Thank you
&lt;/div&gt;


jQuery

$( document ).ready(function() {
 $('.french-flag, .english-flag').css("cursor", "pointer");
 $('.french-text, .english-text').hide();

$('.french-flag').click(function() {
  $('.french-text').show();
  $('.english-text').hide();
});

$('.english-flag').click(function() {
  $('.english-text').show();
  $('.french-text').hide();
});

});


but in drupal you need to wrap your js code inside 

(function ($) {
   // code goes here
})(jQuery);


So your Drupal JS code (example.js) needs to be

(function ($) {
     $( document ).ready(function() {
     $('.french-flag, .english-flag').css("cursor", "pointer");
     $('.french-text, .english-text').hide();

    $('.french-flag').click(function() {
      $('.french-text').show();
      $('.english-text').hide();
    });

    $('.english-flag').click(function() {
      $('.english-text').show();
      $('.french-text').hide();
    });

    });
})(jQuery);


To add/load your jQuery/java script to drupal, there are various methods, see/read Working with JavaScript and jQuery