Dynamic content or clickable table or tabs inside tabs (no idea)

Posted by cmaaga on December 19, 2012 at 10:13pm

Hi,

I guess there is a realy simple solutions, but it's my first time with Drupal :) I used Joomla, Wordpress, Prestashop but Drupal... never before. So, I must say it: IT'S NOT INTUITIONAL. But, let's go to a point :

I must do something like this:

http://wwf8077548df.nazwa.pl/drupal_problem.jpg

As you see there are two dynamic "contents". Clicking on table column in uper box/div/views/panels/block supose to open content with tabs in the lower box/div/views/panels/block. Content have to be easely editable by the user from BO.

I don't have any idea how to start. I try views table with field, I try simple ajax module, but I still feel like I'm walking in the darkness.

If someone have any solution for that i'd be glad for helping with this.

Please, I'm just a girl :) Blonde girl :D

Comments

One step at a time

Posted by minorOffense on December 21, 2012 at 1:35pm

The first thing you'll want to do is create all your HTML elements. Create the main table, create all the tab separated sections and drip the, all on a page. I'd use Views content panes or a series of blocks to do so. Next setup your tabs on your views. You can try the Quick Tabs module if you like.

At this point you hold have all the content you need set and visible on the page. Now we get into applying the css classes to hide/show the content. Create a class called 'element-invisible' (See the Zen theme for some sample code) and apply it to your tabbed content boxes to test. If it works, you can eave as is or write some JavaScript to apply those classes on Dom ready. (that way if JavaScript is off the user can still read the content).

Next add some JavaScript to each table column to toggle the class on the desired content box. The boxes may not appear exactly where you want them yet but we'll get to that. Adjust your JavaScript until you get the desired effect.

Lastly, position your content so it appears below the table when visible using CSS. You may consider using a 'viewing' class or something and put the positioning rules in there. .

There are other ways to do this (e.g. Put all tabbed content into hidden part of page and copy the inner HTML into a container below the table on click) but this method ensures the page will still make sense and be readable even without JavaScript.

Hope that helps.

Thanks. It's realy helpful

Posted by cmaaga on December 26, 2012 at 7:58pm

Thanks. It's realy helpful but I have problem to get my javascript to work. Everything works on fiddle, when I test, but when I apply it into myscript.js (I added it inside mytheme.info) it doesn't work. Mayby I need to use some no conflict function name?

And another question:

How to put jQuery function into my tabel link? I must put it into somewere in drupal or I need use ID and myscript.js?