I guess there is something obviously wrong with this:
var elem = document.getElementById("homepage-mobile-cat1");
console.log(elem);
var test1 = elem.style("margin-left");
var test2 = elem.css("margin-left");
This returns elem.style or elem.css function does not exist.
The output of console.log is
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text -->
</a>
</div>
style is not a function in javascript.elem.style.marginLeft will give the value
var elem = document.getElementById("homepage-mobile-cat1");
var test1 = elem.style.marginLeft;
console.log(test1)
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style=" margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style="">
<p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p>
</div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>
css is a jquery method & it will work with jquery object
console.log($("#homepage-mobile-cat1").css("margin-left"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style="">
<p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p>
</div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>
Try jquery:
alert($('#homepage-mobile-cat1').css('margin-left'));
var elem = document.getElementById("homepage-mobile-cat1");
// You can use this method to calculate the style
var test1 = window.getComputedStyle(elem).getPropertyValue("margin-left");
console.log(test1);
//Or directly get the value from style. But this requires the property value to be already assigned to the style. If not, use the method above.
console.log(elem.style.marginLeft);
//Or alternatively, you can use JQuery
console.log($("#homepage-mobile-cat1").css("margin-left"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="
margin-left: 0 !important;"><a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text --></a>
</div>
Try elem.style.marginLeft.
var elem = document.getElementById("homepage-mobile-cat1");
console.log(elem);
var test1 = elem.style.marginLeft;
console.log(test1);
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>
Related
My code:
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">
<div class="groupicon">
<div class="groupicontext">P</div>
</div>
<div class="grouptext">
<div class="grouptitle">Physics</div>
</div>
<img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';">
</div>
</div></div>
function changeArrow(id){
if(id.src = '../assets/images/down.png'){
id.src = '../assets/images/up.png';
} else {
id.src = '../assets/images/down.png';
}
}
Currently, the arrow doesn't change.
How can I make it so that the arrow changes to up.png?
or even better, have it have an animation and rotate 180 degrees?
Any help would be great - thank you!
do it with == rather than = inside if condition and use getAttribute("src") rahter than src because src give directly whole path but getAttribute gives you what inside it
function changeArrow(id){
console.log(id.src)
if(id.getAttribute("src") == '../assets/images/down.png'){
id.src = '../assets/images/up.png';
} else {
id.src = '../assets/images/down.png';
}
}
function removevBgs(){}
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">
<div class="groupicon">
<div class="groupicontext">P</div>
</div>
<div class="grouptext">
<div class="grouptitle">Physics</div>
</div>
<img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';">
</div>
</div>
</div>
Posting my first question on stackoverflow. I have never had it occur that stackoverflow was not able to provide me with an answer that was already posted but for everything a first time. Here is the problem I have been struggling with:
I have used an HTML form to transfer data (values in specific) from one page to another (don't know PHP). On the dedicated website, I have a portfolio of listings that can be filtered by changing inputs and selects (dropdowns). The JQuery for the filter system works perfectly. However, I have written some JS that changes the values of these selects to the values transferred from the previous site after a delay but this change does not trigger the "select change" event that filters the system. Below is the JS that is running on the website. Again, the filter system works when I manually change the select, but it does not execute when the select is changed by my JS code in the bottom.
Any suggestions will be welcomed with open arms.
Thank you!
jQuery(window).load( function(){
var filters = {};
var $container = $('.grid-container');
$container.isotope();
$('.combination-filter').on( 'change', 'select', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.closest('.btn-groupn');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
return false;
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(window).resize(function() {
$container.isotope('layout');
});
function initselect() {
var parameters = location.search.substring(1).split("&");
var temploca = parameters[0].split("=");
loca = unescape(temploca[1]);
$("input[name=locations]").val(loca);
var tempsqua = parameters[1].split("=");
squa = unescape(tempsqua[1]);
$("select[name=squarems]").val(squa);
var temppric = parameters[2].split("=");
pric = unescape(temppric[1]);
$("select[name=pricings]").val(pric);
};
setTimeout(initselect, 1000)
});
Below the HTML code. My apologies for the bulk of it but hopefully it contains enough for us to figure it out.
<header id="header" class="transparent-header full-header sticky-header" data-sticky-class="not-dark">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<img src="images/nomadrlogoblack.png" alt="Canvas Logo">
</div><!-- #logo end -->
<div class="combination-filter" style="display: inline-block; width: 40%; margin-top: 11px;">
<div class="navblock" style="border-radius: 4px 0px 0px 4px;">
<i class="icon-globe"></i>
<input id="searchTextField" type="text" name="locations" placeholder="Location">
</div>
<div class="navblock btn-groupn" role="group" data-filter-group="space" data-container="#portfolio" style="margin-left: -4px; margin-right: -4px;">
<i class="icon-external-link"></i>
<select name="squarems">
<option class="btnf" data-filter="*" value="all">All</option>
<option class="btnf" data-filter=".tenm2" value="+10m2">+10m<sup>2</sup></option>
<option class="btnf" data-filter=".fifteenm2" value="+15m2">+15m<sup>2</sup></option>
<option class="btnf" data-filter=".twentym2" value="+20m2">+20m<sup>2</sup></option>
<option class="btnf" data-filter=".twentyfivem2" value="+25m2">+25m<sup>2</sup></option>
</select>
</div>
<div class="navblock btn-groupn" role="group" data-filter-group="price" data-container="#portfolio" style="border-radius: 0px 4px 4px 0px; box-shadow: 0.5px 0.5px 1px lightgrey;">
<i class="icon-euro"></i>
<select name="pricings" >
<option class="btnf" data-filter="*" value="all">All</option>
<option class="btnf" data-filter=".p450" value="450max.">450max.</option>
<option class="btnf" data-filter=".p500" value="500max.">500max.</option>
<option class="btnf" data-filter=".p550" value="550max">550max.</option>
<option class="btnf" data-filter=".p600" value="600max">600max.</option>
</select>
</div>
</div>
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="dark">
<ul class="one-page-menu">
<li><div>Home</div></li>
<li class="current"><div>Listings</div></li>
<li><div>FAQ</div></li>
<li><div>Proprietor</div></li>
<li><div>Blog</div></li>
<li><div>Contact</div></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="content">
<div class="content-wrap" style="padding-top: 50px !important">
<div class="container clearfix">
<!--<div class="row topmargin-lg bottommargin-sm">
<div id="section-features" class="heading-block center">
<h2 class="newprime">Our Current Listings</h2>
<span class="divcenter">Below you can filter and find all the listings we have to offer.</span>
</div>
</div> -->
<div class="clear"></div>
<!-- Portfolio Items
============================================= -->
<div id="portfolio" class="portfolio grid-container clearfix">
<article class="portfolio-item tenm2 fifteenm2 twentym2 p500 p550 p600 west">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><img src="images/portfolio/5042ns/5042ns1-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/5042ns/5042ns2-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/5042ns/5042ns3-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/5042ns/5042ns4-min.jpg" alt="Shake It"></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<i class="icon-line-stack-2"></i>
<i class="icon-line-ellipsis"></i>
</div>
</div>
<div class="portfolio-desc">
<h3>Tobias Asserlaan</h3>
<span>20m<sup>2</sup> | €500,- | West</span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 twentym2 p550 p600 west">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><img src="images/portfolio/room5-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room6-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room7-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room8-min.jpg" alt="Shake It"></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<i class="icon-line-stack-2"></i>
<i class="icon-line-ellipsis"></i>
</div>
</div>
<div class="portfolio-desc">
<h3>Statentlaan</h3>
<span>20m<sup>2</sup> | €550,- | West</span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 p500 p550 p600 south">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><img src="images/portfolio/room9-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room10-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room11-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room12-min.jpg" alt="Shake It"></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<i class="icon-line-stack-2"></i>
<i class="icon-line-ellipsis"></i>
</div>
</div>
<div class="portfolio-desc">
<h3>Broekhovenseweg</h3>
<span>15m<sup>2</sup> | €500,- | South</span>
</div>
</article>
<article class="portfolio-item tenm2 fifteenm2 twentym2 twentyfivem2 p550 p600 south">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-pause="10000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><img src="images/portfolio/room13-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room14-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room15-min.jpg" alt="Shake It"></div>
<div class="slide"><img src="images/portfolio/room16-min.jpg" alt="Shake It"></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<i class="icon-line-stack-2"></i>
<i class="icon-line-ellipsis"></i>
</div>
</div>
<div class="portfolio-desc">
<h3>Valkenierstraat</h3>
<span>25m<sup>2</sup> | €550,- | South</span>
</div>
</article>
</div><!-- #portfolio end -->
</div>
</div>
</section><!-- #content end -->
*******EDIT********
Hi there!
I have added the following code to the initselect function, and now it does execute the filter. However, somehow it now does not fill in the last select (price). It leaves it blank, and therefore also does not include it in the filter. Filter now does work on the automated change to the first select. This is the code that executes within the initselect function after the selects are changed by the js:
$(".combination-filter select").each(function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.closest('.btn-groupn');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
return false;
});
You need to invoke the .change() event from your code => $('.combination-filter').change().
If you change the value programatically the change event is not "called by the browser".
Solution to this problem was the following. Instead of having
$("select[name=squarems]").val(squa);
I had to add .change(); to the end of it for each val change in the initselect() function. This would look like this (for each):
$("select[name=squarems]").val(squa).change();
Somehow this made it register as a change and triggered the filter event in JS.
Thank you all for your input!
Cheers
I'm doing a jeopardy board, and I've given each div (each question square) an id in the index.html so when it's clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used the jquery .is and this if/else statement. I've only done the code for A1 and A2, but while A2 should be worth $200, it's coming back worth $100. Why?
if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}
Thank you in advance. Please let me know if I should include any more code. .well is the div class for the question squares.
Adding html code
<div id="wrapper">
<div class="row">
<div class="title"><h2></h2></div>
<div class="question">
<form> Your Answer:
<input type="text" id="answer" /></form>
<button id="submit">Submit</button>
<p id="instruct">When you're sure about your probably wrong answer, click submit</p>
<!-- <div class = "result"> </div> -->
</div>
</div>
<div class="row">
<div class="well" id="A1"> <p>$100</p> </div>
<div class="well" id="B1"> <p>$100</p> </div>
<div class="well" id="C1"> <p>$100</p> </div>
<div class="well" id="D1"> <p>$100</p> </div>
<div class="well" id="E1"> <p>$100</p> </div>
</div>
<div class="row">
<div class="well" id="A2"> <p>$200</p> </div>
<div class="well" id="B2"> <p>$200</p> </div>
<div class="well" id="C2"> <p>$200</p> </div>
<div class="well" id="D2"> <p>$200</p> </div>
<div class="well" id="E2"> <p>$200</p> </div>
</div>
<div class="row">
<div class="well" id="A3"> <p>$300</p> </div>
<div class="well" id="B3"> <p>$300</p> </div>
<div class="well" id="C3"> <p>$300</p> </div>
<div class="well" id="D3"> <p>$300</p> </div>
<div class="well" id="E3"> <p>$300</p> </div>
</div>
<div class="row">
<div class="well" id="A4"> <p>$400</p> </div>
<div class="well" id="B4"> <p>$400</p> </div>
<div class="well" id="C4"> <p>$400</p> </div>
<div class="well" id="D4"> <p>$400</p> </div>
<div class="well" id="E4"> <p>$400</p> </div>
</div>
<div class="row">
<div class="well" id="A5"><p>$500</p> </div>
<div class="well" id="B5"><p>$500</p> </div>
<div class="well" id="C5"><p>$500</p> </div>
<div class="well" id="D5"><p>$500</p> </div>
<div class="well" id="E5"><p>$500</p> </div>
</div>
<h3> score = </h3>
<div class = "score">0</div>
</div>
And this is how I'm doing each question.
$("#A1").click(function() {
$(".question").show();
$('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
$('#submit').click(function() {
$("#answer").on('input')
var answer = $('#answer').val(); //what does this mean in words?
if
(answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
$('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way
score += questionValue;
$(".score").text("$" + score);
}
else
{
$('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
score -= questionValue;
$(".score").text("$" + score);
}
});
});
Whatever you have implemented so far may be correct but I guess its very difficult to maintain that code. Also for any new person t will be quite uneasy to understand that logic. Please have a look at below approach. You may refer it and take an idea out of it:
$(document).ready(function() {
$(".well").click(function() {
var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
alert(quesVal);
});
});
.questionContainer {
width: 250px;
}
.questionContainer .well {
height: 40px;
width: 40px;
border: 1px solid red;
margin-left: 5px;
margin-top: 5px;
float: left;
/*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
<!--Putting question value in each and every box along with id and class as a data- attribute -->
<div class="well" id="A1" data-questionvalue="100">A1</div>
<div class="well" id="B1" data-questionvalue="100">B1</div>
<div class="well" id="C1" data-questionvalue="100">C1</div>
<div class="well" id="D1" data-questionvalue="100">D1</div>
<div class="well" id="E1" data-questionvalue="100">E1</div>
<div class="well" id="A2" data-questionvalue="200">A2</div>
<div class="well" id="B2" data-questionvalue="200">B2</div>
<div class="well" id="C2" data-questionvalue="200">C2</div>
<div class="well" id="D2" data-questionvalue="200">D2</div>
<div class="well" id="E2" data-questionvalue="200">E2</div>
</div>
You can try this way
$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})
it may be length way but works.
Fiddle test
Simplification (this does not address your particular implementation – but simplifies it in a way that could fix your problem)
You could use classes instead of using specific IDs for each cell, and have 5 of each 1 through 5 and A through E:
<div class="row"> <!-- row 1 -->
<div class="r1 a"></div>
<div class="r1 b"></div>
<!-- blah blah -->
<div class="r5 d"></div>
<div class="r5 e"></div>
</div> <!-- row 5 -->
For reference: I use r as a first letter because you can't start a class name with a number.
Then in your JavaScript:
if($('.well').is('.r1')) questionValue = 100;
and so on.
For reference: You can skip the curlybraces {} in an if statement if the contents are one line (such as in this example).
I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});
2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/
Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111
This is my Accordion, How can I expand "systemAccordion" automatically when its parent Configuration is expanded
<div spry:region="mainData">
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/healthicon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showHealthCheckSpan();"><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/conficon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();"><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showKernelParamSpan();">Kernel Parameters</a><br/>
<a onClick="showDiskSpan();">Disk Usage</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> {mainData::#product}</div>
<div class="AccordionPanelContent">
<span id='selectodbc'><a onClick="showOdbcSpan();">ODBC</a></span><br/>
<span id='selectbitmode'><a onClick="showBitmodeSpan();">Bitmode</a></span><br/>
<br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
Got the answer, When we define the accordion we have a choice like below
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
Solved my problem.