jQuery UI tabs without href and/or content, only with events?

Question

I wanted to do something like Wordpress editor.
I took jQuery UI tabs (I don't want to use another tabs plugin, becauase I already use jUI for tabs on the site) and created two tabs named like "WYSIWYG" and "HTML". There's a TEXTAREA under the tabs header.
Then I wanted to use NicEdit - as you can see in the demo, it can "wrap" and "unwrap" textarea with HTML editor. Everything seemed fine, but the problem is:

• when I use "" or "#" in tabs' HREF, the first tab is active, the second is not - so is not clickable, so I cannot attach SELECT event to it
• when I use non-existing id (<a href="#notexist">...), it of course throws exception
• when I use non-existing, "dummy" selector (really - <a href="dummy">...) then under the tabs header (between tabs and textarea) appears quite big space, like tabs created new div and "closed" it as their content.

All I want is to use jQuery UI tabs just to create two tabs without content, which can be (de)selected and fire events when selecting, so I could use NicEdit. What am I missing?

Answer 1

I'm not sure I understand completely what is your problem. I've guessed you are trying to use only one textarea. Correct me if I'm wrong.

Anyway, I think you're better off using two textareas and synchronize them when switching tabs.

NicEdit provides a basic javascript API to get/set the content of editor instances.

I have made jsfiddle for you to see.

Answer 2

I was looking for the natural way to achieve the same (that's how I got here in this topic).

Since there is no answer here, I'll post the simple solution I ended with:

<div id="tabs" class="ui-tabs">
   <ul>
      <li><a id="firstTab" href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <li><a href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <!-- Etc, etc... -->
   </ul>
   <div id="listContent"></div> 
</div>

All the idea is in the empty div, which does not show regardless of the classes jQuery applies to it - simply because there's nothing to show.

This is close to your 3d approach, but the problem there was with incorrect href (without #), unless this was what you intended.

As you can see, you don't even need several divs - each tab href can be the same. I chose "listContect" as div ID because the URL "yourSite/Page#listContent" looks better than someting with "#dummy" or "#tabs".

Off course, onclick event would be prettier if attached using jQuery, but there are reasons (specific for my page) why I use inline approach here.