Collapsible FAQ html

All I want to do is replicate this http://www.utorrent.com/help/faq/features

1. I have no idea about html whatsoever but am guessing I could just 'inspect element' and copy the code into Dreamweaver and edit the content to suit?

2. From there I could then just copy the html from dreamweaver into my moonfruit website via the html snippet functionality.

I've tried to do this in dreamweaver from scratch but for some reason nothing collapses and just stays static: http://elunches.moonfruit.com/faqs/4576061048?preview=Y

Is this because there are other dependent files which haven't been copied and if so how do I do that. As you can probably see I'm totally lost and somewhat frustrated in not being able to do what must be unbelievably easy.
Edwardo1976Asked:
Who is Participating?
 
COBOLdinosaurCommented:
I just don't get how this is so hard for what seems such a functionally simple task?

Its not if you are equipped with the necessary tools.  However you need to learn a few basics.  Having tools that abstract the development of a web site so you can build a site are fine if all you want to do is  work inside a box defined by others. However if you want to go outside the box and add your own ideas then you need to acquire basic skills like HTML, CSS and client side scripting.  

For very basic beginner level, step by step learning I recommend you try: http://www.w3schools.com/

It will not turn you into a professional web developer, but with a few hours of study, you will start to acquire skills that will allow you to understand and use the basic building blocks of web pages, and extend the limits of the tools you are using.

Cd&
0
 
Chris StanyonCommented:
Hi Edwardo,

The effect can easily be done using jQuery. Here's a simple example of how to do the basics:

http://jsfiddle.net/ChrisStanyon/pqNem/

Basically, you have a set of links, followed by the content, wrapped in a DIV. You style the DIVs to be hidden (display:none) and then you attach a click event to the links to slide the following DIVs in and out.

Have a play, and come back if you have any questions
0
 
Edwardo1976Author Commented:
HI, thanks, but there seem to be lots of different things to which the html links (like CSS and JS). If I just copy that html into either the moonfruit html snippet or dreamweaver then the text displays ok but nothing is collapsible? confused
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
The code I posted was just an example - you'll need to include the jQuery library yourself as well as adding the jQuery functions. You do both in the head of your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('h5 a').click(function(e) {
        e.preventDefault();
        $(this).toggleClass('open').parent().next().slideToggle('fast');
    });
});
</script>

Open in new window

You'll need to adapt the code for your own use. Also, I have no idea what MoonFruit is!!
0
 
Edwardo1976Author Commented:
Hi moonfruit is just a website building platform. I just don't get how this is so hard for what seems such a functionally simple task? At the moment I've got this (attached). Where do I add the jquery library/functions in dreamweaver?
0
 
Chris StanyonCommented:
OK. Nothing was attached to your previous comment.

I don't use DreamWeaver so I can't tell you exactly how to do it, but it's fairly straight forward - you just add a few lines of code to the HEAD section of your page and make sure your HTML is setup correcty - that's it.

The elunches site already has the jQuery library loaded, so you only need to add the jQuery function (the $(document).ready bit).
0
 
Chris StanyonCommented:
Really! That's the answer you accepted?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.