Onclick Drop Down Text With Javascript And Html
How would I create this, with JavaScript, HTML and CSS? So when I click on something, (in this case, a name of a project), something will drop down, and it will show me information
Solution 1:
You need to create a div of a class with display: none property in your CSS (to set it invisible in the beginning). Then you need to create a listener on the div, that triggers a javascript function:
HTML
<div class="hidden"id="clkItem">Your text</div>
CSS
.hidden {display: none;}
JS
document.getElementById("clkItem").addEventListener("click", function (e){showItem(e);});
functionshowItem(e) {
e.target.style.display = "block";//Won't work in older IEs
}
Solution 2:
In the <head> of the document:
<styletype="text/css">.details {
display: none;
}
</style><scriptsrc="//code.jquery.com/jquery-1.11.0.min.js"></script><scripttype="text/javascript">
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
});
</script>In the <body> of the document:
<div><spanclass="project">Project 1</span><divclass="details">Some details</div></div><div><spanclass="project">Project 2</span><divclass="details">Some details</div></div><div><spanclass="project">Project 3</span><divclass="details">Some details</div></div>
Post a Comment for "Onclick Drop Down Text With Javascript And Html"