People are trying to program a sequence of two buttons each of these buttons have to open a content in a div next to them and when clicked on another delete the previous content and display a new one. Can anyone help me?
People are trying to program a sequence of two buttons each of these buttons have to open a content in a div next to them and when clicked on another delete the previous content and display a new one. Can anyone help me?
//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><tableborder="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 clickingExecutar
$(document).ready(function() {
is a jQuery selector, in which case it selects all elements $("a")
. a
by itself is an alias for the "class" jQuery, on the other hand $
constructs a new jQuery object. The $()
function we call after is a method of the jQuery object. It binds the click event to all selected elements (in this case, a single element click()
) and performs the function provided when the event occurs.
a
checks if one or more elements already have a specific class defined
A commonly used effect with jQuery is hasClass()
. The Slide
causes the animation to drop, slideDown
, causes the animation to rise and slideUp
causes the HTML element to go up or down depending on whether it is retracted or not.
use: function SwapDivs { $ ('# idDaDivQueVaiDesaparecer'). css ("display", "none"); $ ('#DaDivShouldAccess'). css ("display", "block") } and call the button that you want the function with onclick example: