Solved

Collapsible FAQ html

Posted on 2013-05-14
7
387 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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 …

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now