Question

I am hoping someone can help me out with a problem i am having using the JQuery Accordion plugin. I have very little experience with JQuery so any help would be greatly appreciated!

Basically, i have a link inside one of my accordion tabs which loads a new window. However, when this happens, it closes all of the accordion links within the parent window. I think it does this because it sees the link as part of the accordion which i do not want.

Here is the javascript code:

<script type="text/javascript" src="js/accordion/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/accordion/jquery.easing.js"></script>
<script type="text/javascript" src="js/accordion/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/accordion/jquery.accordion.js"></script>
<script type="text/javascript">
    jQuery().ready(function(){
        // simple accordion
        /*jQuery('#accordion').accordion();*/
        jQuery('#accordion_click').accordion({
            /*animated: 'bounceslide'*/
            animated: 'easeslide',
            autoheight: true

        });

        jQuery('#accordion_hover').accordion({
            /*animated: 'bounceslide'*/
            event: 'mouseover',
            animated: 'bounceslide',
            autoheight: true

        });
    });
</script>

And here is my HTML code:

<a>Accordion Tab 1</a>
<div>
<a href="#" class="basic nonaccordion" onClick="MyWindow=window.open('www.newwindow.com','New_Window','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=yes,resizable=yes,width=400,height=200'); return false;">Load Window </a>
</div>

<a>Accordion Tab 2</a>
<div>
</div>

<a>Accordion Tab 3</a>
<div>
</div>

<a>Accordion Tab 4</a>
<div>   
</div>

Is there an easy way for me to remove the link within tab 1 from the accordion so that it does not close the tabs when the new window loads?

Thanks!

Edit: the CSS for this is below:

/*tab, accordion*/
/*tab 1*/
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; width: 100%; }
ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #c8c8c8;    border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #f5f5f5; }
ul.tabs li a { text-decoration: none; color: #9b9b9b; display: block; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; padding: 0 20px; border: 1px solid #fff; outline: none;}
ul.tabs li a:hover, ul.tabs li.active a { background: #fff; color:#000; }
html ul.tabs li.active, html ul.tabs li.active a:hover  { background: #fff; border-bottom: 1px solid #fff; }
.tab_container { border: 1px solid #f5f5f5; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin:0 0 20px 0; }
.tab_content { padding: 20px; }

/*tab 2*/
ul.tabs2 { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #c8c8c8; width: 100%; }
ul.tabs2 li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px;  border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; }
ul.tabs2 li a { text-decoration: none; color: #9b9b9b; display: block; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; padding: 0 20px; border: 1px solid #fff; outline: none;}
ul.tabs2 li a:hover, ul.tabs2 li.active a { background: #fff; color:#000; }
html ul.tabs2 li.active { background: #fff; border-top: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;border-bottom: 1px solid #fff; }
html ul.tabs2 li.active a:hover{ color:#000; } 
.tab2_container { border: 1px solid #f5f5f5; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin:0 0 20px 0; }
.tab2_content { padding: 20px; }

/*accordion*/
.basic  { width:100%; margin-bottom:40px;  }
.basic div {  background:none; }
.basic p { margin-bottom : 0px; border: none; text-decoration: none; padding: 10px;}
.basic a { cursor:pointer; display:block; padding:10px 10px; margin-top: 0; text-decoration: none; color: black; border: 1px solid #e3e3e3; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; color: #9b9b9b;  background: #f5f5f5 url(../images/collapsed.png) no-repeat 99% 50%; margin-bottom:1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.basic a:hover { background-color:#fafafa; }
.basic a.selected { color: black; background: #fafafa url(../images/expanded.png) no-repeat 99% 50%;}

Answer 1

The CSS you posted doesn’t seem to be relevant to the HTML+JS.

Try using the header option and specifying the header to follow directly after the accordion element > a: http://jsfiddle.net/AkX3z/

I included the basic demo of $.accordion provided by the jQuery UI demos. It doesn’t have this issue, which means it’s probably due to your exclusion of a proper header.