How to dinamically change a band of text accordingly with the button pushed?

Lots of way to do this. I prefer jquery, for example, if the name of your button is "but1", you could sent the text in the paragraph using a function like this.

$("#but2").click(function() {
    $("#lowertext").html("The second button was pushed.");
});

Select allOpen in new window

see https://jsfiddle.net/qzrrqxs3/

What you are asking for looks like tabs - there are many ways to skin this cat - frameworks like Bootstrap come standard with it as does the jQueryUI library to name a few.

If you want to do it yourself it is relatively easily
1. Define your tabs

<ul class="tabs">
   <li><a href="#tab1" class="selected">Tab 1</a></li>
   <li><a href="#tab2">Tab 2</a></li>
   <li><a href="#tab3">Tab 3</a></li>
</ul>

Select allOpen in new window

2. Define your tab content

<div class="tab" id="tab1" style="display: block;">
  <p>Content for tab1</p>
</div>
<div class="tab" id="tab2">
  <p>Content for tab2</p>
</div>
<div class="tab" id="tab3">
  <p>Content for tab3</p>
</div>

Select allOpen in new window

3. Style your tabs

a, a:hover {
	text-decoration: none;
}
ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.tabs li {
  display: inline-block;
}
ul.tabs li a {
  border: 1px solid #0097ce;
  border-radius: 3px 3px 0 0;
  color: #0097ce;
  padding: 5px 15px;
  display: block;
}
ul.tabs li a.selected,
ul.tabs li a:hover {
	background: #0097ce;
	color: #fff;
}
ul.tabs li a.selected a,
ul.tabs li a:hover a {
	color: #fff;
}
.tab {
  border: 1px solid #0097ce;
  display: none;
  margin-top: -1px;
  padding: 15px;
}

Select allOpen in new window

Finally some script to do the work

<script>
$(function() {
  $('ul.tabs li a').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('selected')) {
      $('.selected').removeClass('selected');
      $(this).addClass('selected');
      $('.tab').hide();
      $($(this).attr('href')).show();
    }
  });
});
</script>

Select allOpen in new window

Working sample here

Hello

Thank you for so elaborated replies. Just one more thing, in truth the "buttons" are represented by images. In that case the code could remains the same? (sorry)

Images make no difference - just replace the text with the image.

Hi mankowitz

I used your example with my pictures disposed horizontally. I don't know why the text isn't presented.

 <style type="text/css">
        #content {
        width: 1000px;
        margin: 0 auto 0 auto;
        display: inline-block;
    }
    </style>

 <img src="<?php echo base_url('assets/img/testeira_compras-publicas_ica.png')?>" alt="ppais" title="COMPRASPUBLICAS"/>
        
            <div id="content">
                <img src="<?php echo base_url('xxxxx/img/botao_o_que_e.png')?>" id = "but1" alt="oquee" title="O QUE E" />
                <img src="<?php echo base_url('xxxxx/img/botao_pnae.png')?>"    id = "but2" alt="pnae" title="PNAE" />
                <img src="<?php echo base_url('xxxxx/img/botao_ppais.png')?>"   id = "but3" alt="ppais" title="PPAIS"/>
            </div>
    
       <script>
            $("#but1").click(function() {
                    $("#lowertext").html('<p style="text-align:justify">Criado pelo xxx do xxxxxxxxo e garantir a comercialização dos produtos da agricultura familiar. O Programa faz com que o Estado se torne o principal comprador dos produtos da agricultura familiar, permitindo axxxx idade de vida dos que trabalham no campo.</p>');       
            });

            $("#but2").click(function() {
                    $("#lowertext").html("The second button was pushed.");
            });

            $("#but3").click(function() {
                $("#lowertext").html("The third button was pushed.");
            });

            $("#but4").click(function() {
                $("#lowertext").html("The fourth button was pushed.");
            });
        </script>

Select allOpen in new window

Could you suggest anything more?

Ops...

Just a matter of put this

<p id="lowertext"></p>
  </div>

so it's working?

Ok, very well !
It's a simple and eficient solution.

Just one issue I just open another question about how thw text could fit in the space.

Very clear and easy solution!

Thanks for the assistance