Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 414
  • Last Modified:

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.
0
Edwardo1976
Asked:
Edwardo1976
  • 4
  • 2
1 Solution
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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:
Really! That's the answer you accepted?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now