I have some problem getting this script to work. I want to be able to show the content for the link I am clicking on. I have tried with a for loop and text.length but all I achieved was to get nothing it all to work. I guess it is somewhere in that direction I have to go, but I will paste the code from where something actually works so you get the idea of what I am trying to achieve. In this example the top link is working as it should but I want to apply this to all links. Thanks for any help! Javascript: onload=function(){ showContent(); function showContent(){ var text = document.getElementsByClassName("text")[0]; var showText = document.getElementsByClassName("showText")[0]; var newHeight = 0; var y = 0; text.style.display = "block"; var firstTextHeight = text.offsetHeight; text.style.display = "none"; text.style.height = newHeight + "px"; showText.onclick = function(){ text.style.display = "block"; var textHeight = text.offsetHeight; if (firstTextHeight < textHeight){ slideUp(); } else { slideDown(); } } function slideDown(){ y++; if(y <= firstTextHeight){ text.style.height = y + "px"; setTimeout(slideDown, 1); } showText.innerHTML = "Slide up"; } function slideUp(){ y--; if(y >= 0){ text.style.height = y + "px"; setTimeout(slideUp, 1); } else { showText.innerHTML = "Slide down"; text.style.display = "none"; } } } } Code (markup): HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> <script src="javascript/script.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="content"> <a href="#" class="showText">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <a href="#" class="showText">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <a href="#" class="showText">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> </div> </body> </html> HTML: CSS: #wrapper { width: 960px; margin: 0 auto; } #content { background: #234343; height: 600px; width: 700px; float: left; padding: 20px; } .showText { display: block; color: #282828; border: 1px solid #282828; width: 400px; background: #bbb; padding: 5px; } .text { overflow: hidden; width: 400px; background: #fff; border: 1px solid #282828; padding: 5px; display: none; } Code (markup):
Here, it's not perfect as you have to click it twice, just fix it up a bit: <script type="text/javascript"> function showContent(obj){ var i = 0; do{ var text = document.getElementsByClassName("text")[i]; var showText = document.getElementsByClassName("showText")[i]; } while(obj != document.getElementsByClassName("showText")[i] && ++i); var newHeight = 0; var y = 0; text.style.display = "block"; var firstTextHeight = text.offsetHeight; text.style.display = "none"; text.style.height = newHeight + "px"; showText.onclick = function(){ text.style.display = "block"; var textHeight = text.offsetHeight; if (firstTextHeight < textHeight){ slideUp(); } else { slideDown(); } } function slideDown(){ y++; if(y <= firstTextHeight){ text.style.height = y + "px"; setTimeout(slideDown, 1); } showText.innerHTML = "Slide up"; } function slideUp(){ y--; if(y >= 0){ text.style.height = y + "px"; setTimeout(slideUp, 1); } else { showText.innerHTML = "Slide down"; text.style.display = "none"; } } } </script> Code (markup): And: <body> <div id="wrapper"> <div id="content"> <a href="#" class="showText" onclick="showContent(this);">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <a href="#" class="showText" onclick="showContent(this);">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <a href="#" class="showText" onclick="showContent(this);">Slide down</a> <div class="text"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> </div> </body> Code (markup):