Is it possible to create a div element with jquery onclick of a link

Question

Hi,

I have a navigation list, the effect I am wanting is for when the user clicks on a link an accodian style div is built and displayed by jquery, then if the user clicks the same screen the is deleted from the screen, could someone suggest how this could be achieved I have been searching google with no luck.

Thanks

Answer 1

Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/

Answer 2

Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.

$('.navLink').click( function() {
   var accordion_id = 'accordion_' + this.id;
   var accordion = $('#' + accordion_id);
   if (accordion.length > 0) {
      accodion.remove();
   }
   else {
      $('<div id="' + accordion_id + '"></div>')
           .appendTo('#someDiv')
           .load( $(this).attr('href') )
           .accordion();
   }
   return false; // cancel default action of link
});