jQuery UI accordion- disable
Hi everyone, I'm pretty new with jQuery, so when it comes to customizing it I find it difficult. I'm using the accordion effect, but I want it to disable it if the content inside the header for the accordion is empty. I think I need to create a conditional statement that says if the content inside the header is empty then disable the accordion. Problem is I don't know how to write it and I tried looking for a solution, but couldn't find it.
For instance this is my html code:
- <div id="accordion">
- <p><a href="#">header</a></p>
- <div>
- <ul>
- <li><a href="#">link</a></li>
- </ul>
- </div>
- <p><a href="#">header</a></p>
- <div>
- <ul>
- <li><a href="#"> </a></li>
- </ul>
- </div>
- <div>
The second <ul> has an empty <a> </a> and I want the conditional statement to be if the inside of that <a> tag is empty then disable the accordion. Something to that effect because it just looks weird because there's nothing there to select.
My jQuery:
- $(document).ready(function() {
$("#accordion").accordion(
{
active: false,
autoHeight: false
});
- });
Can this be done using the jQuery UI for accordion? Or would I have to use a different method such as toggle?