Försöker mig på en liten simpel show-/hide-effekt till några divar som tar lite stor plats - vilket jag gjort tusen gånger förut - men får det inte att fungera.
Kan någon här som är bättre än mig på JavaScript (jag har aldrig sysslat med det annat än typ cut'n'paste) hjälpa mig.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".code-left").hide();
$(".code-right").hide();
//toggle the componenet with class msg_body
$(".demobox-dark").click(function()
{
$(this).next(".code-left").slideToggle(300);
});
$(".demobox-light").click(function()
{
$(this).next(".code-right").slideToggle(300);
});
});
</script>
<div class="demobox-light">
<div class="color_blacktext"> </div>
<p>Black text</p>
</div>
<div class="demobox-dark">
<div class="color_whitetext"> </div>
<p>White text</p>
</div>
<p>Code:</p>
<div class="code-left">
<p class="code">TEXT</p>
</div>
Tryck här för att läsa igenom jQuery.js
Tanken är att alla code-* (finns det något wildcard i javascript?) ska gömmas. Sedan när man trycker på demobox-light så ska nästa code-left togglas, och vice versa för demobox-dark och code-right.
För tillfället så göms de, men när man trycker på demobox så händer ingenting.
Dold text: Och ja, jag är medveten om att jQuery troligen är overkill för detta. Men jag är som sagt ingen stjärna på JavaScript, och kan således inte göra det själv.
StackOverflow löste det åt mig. I och med att jag hade element mellan mina divar så fungerade inte .next
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class code-*
$(".code-left").hide();
$(".code-right").hide();
//toggle the component with the respective class
$(".demobox-dark").click(function()
{
$(this).nextAll(".code-right:first").slideToggle(600);
$(this).nextAll(".code-left:first").slideToggle(600);
});
$(".demobox-light").click(function()
{
$(this).nextAll(".code-left:first").slideToggle(600);
$(this).nextAll(".code-right:first").slideToggle(600);
});
});
</script>
Ni får dock mer än gärna berätta för mig hur jag kan få detta att inte se så förbannat fult ut. Jag vill toggla både nästa .code-left och .code-right när man trycker på antingen demobox-dark eller demobox-light.
Tråden låst på grund av inaktivitet
