Solved

Collapsible FAQ html

Posted on 2013-05-14
7
389 Views
Last Modified: 2013-05-14
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
Comment
Question by:Edwardo1976
  • 4
  • 2
7 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39164862
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
 

Author Comment

by:Edwardo1976
ID: 39164955
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39165003
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Edwardo1976
ID: 39165061
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39165132
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39165178
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39165214
Really! That's the answer you accepted?
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question