Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

OnClick Drop Down Text With JavaScript And HTML

Post a Comment
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);});

function showItem(e) {
e.target.style.display = "block";//Won't work in older IEs
}

Solution 2:

In the <head> of the document:

<style type="text/css">
  .details {
    display: none;
  }
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".project").on('click', function() { 
            $(this).parent().find('.details').slideDown();
        });
    });
</script>

In the <body> of the document:

<div>
  <span class="project">Project 1</span>
  <div class="details">Some details</div>
</div>
<div>
  <span class="project">Project 2</span>
  <div class="details">Some details</div>
</div>
<div>
  <span class="project">Project 3</span>
  <div class="details">Some details</div>
</div>

Post a Comment for "OnClick Drop Down Text With JavaScript And HTML"