My current issue lies with setting the style for the contents of an accordion. The problem arises when the styles defined in a CSS file do not take effect on the content of my accordion when using the following code along with a separate CSS file:
<script>
$(document).ready(function() {
var str = '<h3><a href="#">Device</a></h3>' +
'<div class="content">'+
'<div class="block left">' +
'<img width=30 height=30/>' +
'</div>' +
'<div class="block left">' +
'<img width=30 height=30/>' +
'</div>' +
'</div>' +
'<h3><a href="#">VM</a></h3>' +
'<div class="content">'+
'<div class="block left" >' +
'<img width=30 height=30/>' +
'</div>' +
'<div class="block left">' +
'<img width=30 height=30/>' +
'</div>' +
'</div>';
The relevant code snippet from the CSS file is as follows:
div.toolbox-block {
width:30px;
height:30px;
overflow: hidden;
background-color: rgba(0,0,0,1);
}
div.left {
float:left !important;
}
The above code works perfectly if I set the styles inline to the tags within the variable 'str', like this:
str = '<h3><a href="#">Device</a></h3>' +
'<div class="content">'+
'<div style="width:30px; height:30px; overflow: hidden; background-color: rgba(0,0,0,1); float: left;">' +
'<img width=30 height=30/>' +
'</div>' +
'<div style="width:30px; height:30px; overflow: hidden; background-color: rgba(0,0,0,1);float:left;">' +
'<img width=30 height=30/>' +
'</div>' +
'</div>' +
'<h3><a href="#">VM</a></h3>' +
'<div class="content">'+
'<div style="width:30px; height:30px; overflow: hidden; background-color: rgba(0,0,0,1);float:left;">' +
'<img width=30 height=30/>' +
'</div>' +
'<div style="width:30px; height:28px; overflow: hidden; background-color: rgba(0,0,0,1);float:left;">' +
'<img width=30 height=30/>' +
'</div>' +
'</div>';