Solved

Collapsible FAQ html

Posted on 2013-05-14
7
404 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

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

Industry Leaders: 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!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

615 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