When clicking on a button open content in a div by clicking on another button delete content from the div and open the new

Question

People I’m two days trying to program a sequence of buttons each of these buttons have to open a content in a div next to them and when clicked on another erase the previous content and exiber a new one. Someone can help me?

Answer 1

//SCRIPT

    $(document).ready(function () {
      $("a").click(function () {
        if ($(this).hasClass("same-box")) {
          $(".toggle:visible").slideUp();
          $($(this).attr("href")).slideDown();
          return false;
        }
        var myelement = $(this).attr("href");
        $(myelement).slideToggle("fast");
        $(".toggle:visible").not(myelement).slideUp();
      });
    });

//CSS
.toggle { display: none; } 
.same-box-1 { display: none; }

<!--HTML-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <table border="0" align="center">
      <tbody>
        <tr>
          <td><a href="#box1"><button>Mostrar div 1</button></a></td>
          <td><a href="#box2"><button>Mostrar div 2</button></a></td>
          <td><a href="#box3"><button>Mostrar div 3</button></a></td>
          <td><a href="#box4"><button>Mostrar div 4</button></a></td>
        </tr>
      </tbody>
    </table>

    
  <div class="same-box-1 toggle" id="box1">
	<p>O tempo deixa perguntas, mostra respostas, esclarece dúvidas.</p>
  </div>
  
  <div class="same-box-1 toggle" id="box2">
        <p>Lorem ipsum dolor sit amet, consectetuer sit nec dignissim ligula blandit, mauris et massa lacus sed eu fusce, non aliquet aenean et, ultricies pellentesque vel nam, velit erat ut tincidunt curae tincidunt. Blandit orci, 			potenti quis quis maecenas. Etiam a interdum malesuada orci, justo sit aliquam est amet praesent magna, etiam rutrum in semper aut. Mi tempus eu molestie lorem dignissim, aenean in ante mi, nam porttitor nonummy 				condimentum et a, sit dictumst, sem sem massa. Vehicula libero ut in orci aenean eleifend, ipsum placerat, platea risus, amet tincidunt, pellentesque dolor id sed facilisi faucibus. Libero cum nec aliquam vitae dictum 			habitasse, metus aliquam, nunc sit ut elit at, feugiat fusce viverra tempus posuere, porttitor et ac fringilla magna eget posuere. Porttitor vehicula, dignissim natoque, lectus lobortis felis habitant integer maecenas 			luctus, et viverra adipiscing in. Vitae habitasse penatibus vitae, scelerisque fermentum ipsum leo adipiscing tincidunt, nisl turpis consectetuer. Vel nullam vivamus eleifend, mi praesent ac. Placerat varius hymenaeos 			vestibulum vitae ullamcorper. Nulla ornare nulla auctor, ut eleifend porta quis nonummy fringilla sit, pellentesque tortor nulla curabitur duis.</p>
  </div>
  
  <div class="same-box-1 toggle" id="box3">
        <p>Sollicitudin egestas sed auctor lacus in, congue consectetuer et eu dolor aliquet vitae, diam ac mattis, dui proin consequat vel quisque quisque cum. Eget vestibulum at litora. Nulla tincidunt facilisi potenti vel, massa 			eget mi vel dui ante, mattis vitae ad nunc, nulla nibh erat id consectetuer, viverra risus velit dolor eros elementum malesuada. Vitae leo fusce nec eu viverra, ipsum erat justo habitasse ut velit. In congue euismod in, 			donec augue, platea cras donec elit urna ut turpis, sapien tincidunt aenean consequat. Libero eros vestibulum metus justo dui veniam, orci fusce, eget at ut. Dolor consequat enim, scelerisque donec pulvinar scelerisque. 			Justo sit. In dis a nullam, vel pede sit vel. Risus rhoncus justo, laboris egestas vitae sit mauris, amet vitae nunc, vivamus vel eleifend at dignissim quis lacus, sit lacus lacus.</p>
  </div>
  
  <div class="same-box-1 toggle" id="box4">
        <p>Orci laoreet ipsum integer mattis magna, egestas egestas eu dui felis vivamus lorem, morbi fermentum in leo et, interdum sollicitudin, pellentesque massa elit. Wisi luctus, sed praesent sed etiam, in quisque ac nam wisi 			est, in scelerisque nullam urna et. Donec adipiscing, nullam ut eget integer, pellentesque sem, malesuada et magnis, sed sed urna mattis. Aenean et odio, massa quis ipsum, vitae a nibh excepturi etiam rutrum, maecenas 			laoreet eleifend wisi orci mi, tortor urna. Perferendis justo luctus quis volutpat sed ligula. Sociis non rutrum justo turpis a sed, felis amet ut velit erat duis rutrum, arcu eros wisi a consectetuer eros, vitae 				aliquam. Nulla elit mus cras mauris, elementum donec interdum turpis eget euismod, tempus quis. Faucibus varius, luctus dictum mauris vel ullamcorper placerat. Torquent in tempor</p>
  </div>

Best viewed if you click Pagina toda after clicking on Executar

• $(document).ready(function() { like almost everything we do when using jQuery reads or manipulates a document object model (DOM), we need to make sure we get added events etc as soon as the DOM is ready.

• $("a") is a jQuery selector, in this case it selects all elements a. The $ by itself is an alias for the "class" jQuery, on the other hand the $() builds a new jQuery object. The function click() which we call after is a method of the object jQuery. It connects the event click to all the selected elements (in this case, a single element a) and performs the function provided when the event occurs.

• hasClass() checks whether one or more elements already have a specific class defined

• A widely used effect with jQuery is the Slide. The slideDown makes the animation falling, the slideUp, makes the animation going up and the slideToggle makes the HTML element go up or down depending on whether it is retracted or not.

Answer 2

Utilize:

function TrocaDivs
{
  $('#idDaDivQueVaiDesaparecer').css("display","none");
  $('#idDaDivQueVaiAparecer').css("display","block")
}

And calls on the button you want the function with the onclick, for example:

<button onclick="TrocaDivs();"> </button>