Change css of active accordion and parent tab in jquery-ui

Question

I am kinda new to jquery so have confusion regarding how to select the parent tab or just add effect on the current accordion. Whatever code I write within the script in the php condition is not making any visible change in the css of .ui-widget-header, most likely because I'm not selecting the parent element itself.

Let me give the necessary snippet of my code

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
    <div id="accordion">

       <div> Some content </div>
       <div> 
           <?php  
           //Perform some query
           if (mysqli_num_rows($query)==0)
           //Make background of current accordion, and parent tab red. Add jquery script here
           echo "<script type='text/javascript'> </script>";//No clue what should be within this script, hence blank...
//Probably something like  $("accordion").parent("#tabs").css( background-color: red;background-image: none;)
//OR $(this).parents('div#tabs').css( background-color: red;background-image: none;)
           ?> 
       </div>
       <div>
          2nd accordion. There should be no effect here. 
       </div>
   </div>
   .....

A modfiied snipped is available on - jsfiddle.net/buKLE/8 ...Currently just tabs, and accordion. If possible, try and change the css of just tab1, supposing there is an error in accordion Section 2. Is it going to be even possible to change the color of just that accordion, since all the accordions are bound together here...

Answer 1

You are pretty close, you have two little errors in your code.

You missed the hash sign, and took the wrong traversing method:

               ↓ only traverses one level up
$("accordion").parent("#tabs")

should be:

   ↓ hash       ↓ traverses upwards, until the selector matches or top is reached
$("#accordion").parents("#tabs")