My CSS contains IDs that look like this:
<style>
.HIDE-DISPLAY-k {
background-color: orange;
position: fixed;
width: 100%;
height: 100%;
top: 10px;
bottom: 0px;
left: 10px;
right: 0px;
overflow: hidden;
}
#SHOW-DISPLAY-k {
background-color: yellow;
position: fixed;
width: 70%;
height: 50%;
top: 100px;
bottom: 0px;
left: 10px;
right: 10px;
overflow: hidden;
display: none;
cursor: pointer;
}
.BUTTON-k {
background-color: orange;
position:absolute;
top: 50px;
left: 10px;
cursor: pointer;
}
</style>
I am calling it from a JavaScript file like this
<script type="text/javascript" src="Scripts/sliding_Documents.js"></script>
<script type="text/javascript">
$(document).ready(function(docProperty) {
docProperty='|FROM_top|width|10|height|1500|top|30|bottom|""|left|500|right|""|'
sliding_NotePads(docProperty);
});
</script>
<a class="BUTTON-k" href="#"><button>NOTEPAD</button></a>
<div class="hidden_SHOW-DISPLAY"></div>
<div id="SHOW-DISPLAY-k"></div>
//docProperty is simply an array where I put specific values to use in changing CSS such as width, height.
The JavaScript code in sliding_Documents.js is
function sliding_NotePads(docProperty) {
/*Without clicking, the hide-display-k will be in place and nothing can be seen.
When clicked, the if condition defines how the display appears*/
$('.HIDE-DISPLAY-k').hide()
/*Get the information added to the button to customize the display window*/
$('.BUTTON-k').click(function () {
var css_changes = docProperty.split("|");
//this is where I make changes to the CSS
$("#DISPLAY-k").css({
width: css_changes[css_changes.indexOf("width") + 1],
height: css_changes[css_changes.indexOf("height") + 1],
top: css_changes[css_changes.indexOf("top") + 1],
bottom: css_changes[css_changes.indexOf("bottom") + 1],
left: css_changes[css_changes.indexOf("left") + 1],
right: css_changes[css_changes.indexOf("right") + 1]
});
if(css_changes[1]==="FROM_top"|| css_changes[1]==="FROM_bottom"){
$('#SHOW-DISPLAY-k').css('z-index', 2).slideToggle("slow");
};
if(css_changes[1]==="FROM_left"|| css_changes[1]==="FROM_right"){
$('#SHOW-DISPLAY-k').css('z-index', 2).animate({width: 'toggle'}, "slow")
};
});
};
How can I revert the changes made in #SHOW-DISPLAY-k and assign it a new ID or name so that it only affects one element and not others on the HTML page?