javascript - CSS and HTML: How to create an Expanding DIV On Click? - Stack Overflow

admin管理员组

文章数量:1323705

I need to create a DIV that has some content (some of which is hidden) and when you click on it, it expands and reveals the rest of its content..

I have found many HOWTOs but use jQuery....

I would like a solution using CSS and HTML (Javascript is good also!)

Thanks in advance!

I need to create a DIV that has some content (some of which is hidden) and when you click on it, it expands and reveals the rest of its content..

I have found many HOWTOs but use jQuery....

I would like a solution using CSS and HTML (Javascript is good also!)

Thanks in advance!

• javascript
• css
• html
• onclick

Share Improve this question Follow asked Jun 29, 2012 at 10:22 ant0niskant0nisk 59111 gold badge44 silver badges1818 bronze badges 10

• You do realize that jQuery is a JavaScript library? – Bram Vanroy Commented Jun 29, 2012 at 10:23
• Hmmm... I am not Familiar with jQuery.... Thanx for the Info! :-) – ant0nisk Commented Jun 29, 2012 at 10:24
• However, I would like a solution that accepts CLASSES.. What I found with jQuery, is ONLY with IDs.... – ant0nisk Commented Jun 29, 2012 at 10:26
• May be it's better if you learn about Jquery. Then ask question – sandeep Commented Jun 29, 2012 at 10:27
• That is what I will probably do soon.... – ant0nisk Commented Jun 29, 2012 at 10:28

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 4

<div id="sample"></div>

css

#sample {
    border: 1px solid black;
    height: 15px;
    padding: 12px;
    overflow: hidden;    
}

javascript

document.getElementById("sample").onclick = function() {
    this.style.height = 'auto';
}

you can use some jquery for animated div

本文标签： javascriptCSS and HTML How to create an Expanding DIV On ClickStack Overflow