Vertical tabs in sidebar changing content div

[fedude]

I came across some really interesting jquery code that allows me to have vertical tabs (in a sidebar) that changes the html in the content div. 

http://jqueryui.com/tabs/#vertical

I’m a jquery noob and I could not find any references to this functionality in the forum. Can someone give me a lead on how I might implement this in weaver ?

I am using Weaver Extreme with a purchased Plus plugin

[scrambler]

You can place the script and html in a text widget that you would put in the sidebar widget area (do not include any of the Body and head tags, just the <script>…</script>  <style>…</style>  and the html itself

Beware of a few things:

• Never load a different version of jquery in your script as the theme already load the one acceptable by WordPress.
• You will need to change $ by jQuery in the script. For example I see something like

<script>
$(function() {
 $( “#tabs” ).tabs().addClass( “ui-tabs-vertical ui-helper-clearfix” );
 $( “#tabs li” ).removeClass( “ui-corner-top” ).addClass( “ui-corner-left” );
});
</script>

That will need to become

<script>
jQuery(function() {
 jQuery( “#tabs” ).tabs().addClass( “ui-tabs-vertical ui-helper-clearfix” );
 jQuery( “#tabs li” ).removeClass( “ui-corner-top” ).addClass( “ui-corner-left” );
});
</script>

[fedude]

Thanks Weaver.  This works as advertised.

Can you help me to point the output to the #content div

Something like this? 

 jQuery(‘#content’).html( ???);

[scrambler]

A) I am not weaver 🙂

B) I don’t understand what you mean by “to point the output to the #content div”

[fedude]

Sorry Scrambler.  My bad….

What I really want to do is to copy the contents of a different  external HTML file to the #content div depending upon which option in the list is selected.

I’m guessing this has been done before, but like I said I’m a JS noob.  I did find  a module => “FancyZoomHTML.js”  that “might” be what I’m looking for but it’s also a very powerful module with many other functions.

So depending on the list item selected, in the test widget (in my sidebar) , I want to refresh the #content div with the HTML contents from a different external HTML file

Appreciate the help…

[scrambler]

This forum is really not the place for jQuery support, you need to look in jQuery forum for how to insert content.

I believe there are two methods, append to a selected object, or prepend, depending if you want to insert at the beginning or at the end.

like

jQuery(“#content”).prepend(“html content”);

would insert at the beginning of that element.

But you are on your own messing with that 🙂

[Weaver]

Indeed, general jQuery is beyond the scope of this forum.

We can answer questions about the classes attached to specific elements in the HTML – but not how to do the jQuery.

[Author]

Posts