CODEWITHSUNDEEP
javascriptcsshtml
Jacob
Jacob

Reputation: 4031

Close icon on dynamic div

I have a div which I create dynamically. I also switch the div's visibility using display:none and display:block. I want to create a close icon for that div using plain Javascript and CSS. Is that possible?

I have tried using an simple X icon for changing the visibility.

Here is my CSS: 

.dhSeriesToolbar {
     max-height: 200px;
     width:400px;
     background-color: black;
     z-index:999;
     display:none;
     overflow:auto;
     border: 2px solid #33ccff;
     padding-left: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     position:absolute;
 }

Upvotes: 1

Views: 770

Answers (4)

defau1t
defau1t

Reputation: 10619

You can create a close icon too dynamically along with that div e-g 

$("body").append("<div class='dynamically_created_div'><a href='javascript:void(0);' onclick='closeDiv()'></a></div>");

function closeDiv() {
  $(".dynamically_created_div").hide();
}

Upvotes: 0

SQLGuru
SQLGuru

Reputation: 1099

you could also play with visibility:hidden

Upvotes: 0

sourcecode
sourcecode

Reputation: 1802

yes possible...do like this

// javascript part
myfunction(){
document.getElementById("divShowHide").setAttribute("style", "display:none;");
}

// html part
<img src="icon.png" onclick="myFunction()"/>

Upvotes: 1

Romain Linsolas
Romain Linsolas

Reputation: 81667

It would be better to see your code to help you better. But the idea is the following: add an icon (<img>) in your <div> element, and bind a Javascript call to the onclick event that will hide (or remove, regarding your needs) the <div>.

Upvotes: 1

Related Questions