I tried following a tutorial to improve my coding skills, but I'm facing issues with my code. It seems like my jQuery isn't able to locate the panelid. I can successfully alert the panelids, but the functionality of clicking on "läs mer" and displaying text is not working as expected. The text should pop out when clicking on "läs mer" and change to "mindre-" . I'm feeling stuck and don't know where to go from here! This is driving me crazy.
The tutorial video: https://www.youtube.com/watch?v=Cc3K2jDdKTo
Html:
<ul>
<li> <a data-panelid="panel1" class="showhide" href="#">Läs mer +</a> </li>
<li> <a data-panelid="panel2" class="showhide" href="#">Läs mer +</a> </li>
<li> <a data-panelid="panel3" class="showhide" href="#">Läs mer +</a> </li>
</ul>
<div id="panel1" class="textstyle">Ett enda bett från inlandstaipanen innehåller tillräckligt mycket gift för att döda upp till 100 vuxna människor eller 250 000 möss.</div>
<div id="panel2" class="textstyle">ouahsfouashfoas aushfaslal.</div>
<div id="panel3" class="textstyle">ioajsfoiasjgoiashfoas oahsgkmaspof.</div>
Jquery:
$(document).ready(function() {
$(".showhide").click(function() {
var panelId = $(this).attr('data-panelid')
alert(panelId);
var txt = $(this).text();
$(panelId).toggle();
if (txt == "Läs mer +") {
$(this).text('Mindre -');
} else {
$(this).text('Läs mer +');
}
});
});
Thank you for everything :)