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

Hi Experts!

Could you please give me a solution to this:

I need to dinamically change the information contained in a band accordingly with the button pushed.
(in the Picture is represented the first button pushed and correspondently text)

img_ee_001_131115.png
Thanks in advance!
Eduardo FuerteDeveloper and AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mankowitzCommented:
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.");
});

Open in new window

see https://jsfiddle.net/qzrrqxs3/
0
Julian HansenCommented:
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>

Open 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>

Open 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;
}

Open 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>

Open in new window

Working sample here
1
Eduardo FuerteDeveloper and AnalystAuthor Commented:
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)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Images make no difference - just replace the text with the image.
0
mankowitzCommented:
in this example, I replaced the buttons with icons: https://jsfiddle.net/tuj1g2m2/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eduardo FuerteDeveloper and AnalystAuthor Commented:
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>

Open in new window


Could you suggest anything more?
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Ops...

Just a matter of put this

<p id="lowertext"></p>
  </div>
0
mankowitzCommented:
so it's working?
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
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.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Very clear and easy solution!

Thanks for the assistance
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.