jQuery UI tabs not working in expression engine website

Question

i've been trying to get jquery ui working for an area I would like to have tabs in and have been trying for the past couple of days with no luck!

The idea is to display or not display tabs, depending on whether there is content or not. Also for the content area, when there is no entries, the relevant html is not created either.

The address for the development site is http://garden.paperfish.co/index.php/problem-solving/roses

the code is:

<div id="tabs">
    <ul>
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="diseases" limit="1" require_entry="yes"}
    <li><a href="#tabs-1">ασθένειες</a></li>
{/reverse_related_entries}
{/exp:channel:entries}

{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="pests" limit="1" require_entry="yes"}
    <li><a href="#tabs-2">εχθροί</a></li>
{/reverse_related_entries}
{/exp:channel:entries}

{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="nutrition" limit="1" require_entry="yes"}
        <li><a href="#tabs-3">τροφοπενίες</a></li>
{/reverse_related_entries}
{/exp:channel:entries}

    <li><a href="#tabs-4">όλα</a></li>

</ul>
{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="diseases" limit="1" require_entry="yes"}
    <div id="#tabs-1">diseases</div>
{/reverse_related_entries}
    {/exp:channel:entries}

{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="pests" limit="1" require_entry="yes"}
    <div id="#tabs-2">pests</div>
{/reverse_related_entries}
{/exp:channel:entries}

{exp:channel:entries channel="plant-categories"}
{reverse_related_entries channel="nutrition" limit="1" require_entry="yes"}
    <div id="#tabs-3">nutrition</div>
{/reverse_related_entries}
{/exp:channel:entries}

    <div id="#tabs-4">all</div>
</div>

any help would be very much appreciated

Answer 1

Can you try removing the hashes in front of the ids of content divs

Change

<div id="#tabs-1">
    diseases
</div>

to

<div id="tabs-1">
    diseases
</div>