"Accordian" Text Boxes

[marktho]

Hi folks

I'm building a website with Web Designer MX Premium, and I'm trying to get the sort of behaviour where when I click on a line of text, more text appears beneath it - it expands, like an accordian, and when the user clicks on the same line of text the text box beneath it disappears. As an example, the Xara Support page - http://support.xara.com/index.php?_m...articleid=2893 - when you click on the question the text appears beneath it. Whilst it'd be cool to have the text spin up like they have it, it's not essential - I just want the behaviour where the text box expands to show the information.

Another example, and closer to what I really want to acheive is this page: tssredmond.com/Pages/Course-Detail.aspx?CourseID=102

When you click on the Course Description or Course Outline boxes they expand and show the text.

I'm pretty new to web design, it's been a steep learning curve, but I think I'm getting there, but I've tried various ways of emulating this behaviour, and I just can't seem to get it. Any advice would be hugely appreciated!!

Thank you!

Mark

[gwpriester]

Welcome to TalkGraphics

I'm not sure I understand what you are asking. But then there's a lot I don't understand.

Do you mean when the visitor clicks a line of text that a menu of additional options appear below or to the side?

[Drwyd]

Hi Marktho, welcome to TG

Neither either methods are possible without workarounds, WDMXP uses absolute positioning to accurate position of the design elements. This means that dynamically changing the page length is not normally possible.

There is a tweak that will allow dynamic page lengthening but I am not familiar with it.

[Drwyd]

There are some accordion widgets in the design gallery under Content Slideshows (widgets) that may be an alternative

[marktho]

Thank you! It's nice to be here, I've a feeling I'll be asking plenty of dumb questions, but hope I can chip in and give back to the forum at some point

Take a look at this: http://www.roadrash.no/?page_id=13

When I click on the + or the text in a grey box, further information is "expanded" below it. Click on the text or + again, and the text disappears or "contracts". That's exactly what I'm trying to achieve, but with a paragraph or two of text, rather than a list of hyperlinks like in the example. Xara do something similar with their support topics, albeit with a whizzy way of spinning the text in.

-M

[marktho]

There are some accordion widgets in the design gallery under Content Slideshows (widgets) that may be an alternative

Yes, I tried those, they're not really what I'm after since they work best with images rather than text, but if it's the only option I have then I'll fall back on it

-M

[gwpriester]

OK, it helps if one reads the question thoroughly.

You can accomplish this with layers. I have done this with one line of text and one layer. The line of text is linked to the new pop up layer.

You will need to add a new layer for each question, or line of text and link each line of text to the appropriate layer.

[marktho]

OK, it helps if one reads the question thoroughly.

You can accomplish this with layers. I have done this with one line of text and one layer. The line of text is linked to the new pop up layer.

You will need to add a new layer for each question, or line of text and link each line of text to the appropriate layer.

That's certainly getting there, but it looks like you have to allocate the space for the text to fill in first? I could be reading it like a total noob mind you I guess you could hide the text by having a similar layer?

I've managed to find a jScript on CodeCanyon.net that performs what I'm looking for, I'm just not sure where all the files and stuff goes in WD so that when the site is exported the files are in the correct js or whatever directory for the scripts to call.

[marktho]

Thanks all for all your help so far :

The best example I've seen so far is http://www.dynamicdrive.com/dynamici...edcollapse.htm but I'm not sure where to put the various elements on the page, or if I'm going to resort to coding it in notepad then dropping it in to a placeholder on the page. Also, not sure where to put the animatedcollapse.js file. I think I may be pushing WD a little farther out of it's comfort zone . Maybe my best bet would be to do the majority of the pages in WD and then something else to add in the jScript component .

[marktho]

A not unexpected response from Xara support - still, I've always liked the responsiveness of Xara and their support team, so I'm not upset - what I'm trying to do is after all the sort of thing you'd want after progressing from a tool like WD. Their workaround's the same as your gwpriester

This exact feature as used in the support article is not possible within Web Designer. It uses external code libraries not found in Web Designer and also means the page must resize to fit in the revealed text. Page resizing depending on content is not something supported by Web Designer that exports fixed page sizes.

There is a way of acheiving something similar in Web Designer using pop-up layers. Add the text you want hidden to a pop-up layer, then apply a link to the question/visible text to show the pop-up layer either on mouse over of the text or when the visible text is clicked on.