Creating a Dropdown

Animation
1

I have a symbol that I use that slides in from the left if the screen.

I now need to create 3 sections in a drop down like the Jquery Accordion.

I have added the Jquery & Jquery UI and copied the code from the query site into a HTML widget.

It doesn’t show correctly and I have no Idea how I use this in my existing symbol.

Or is there another method that can achieve what I need

Cheers

Steve Warby

DropDown.hype.zip (176.2 KB)

2

Very nice, thank you.

3

Hi Steve!

What isn’t showing correctly?

Your accordion appears to be functional, but it is rather vertically restricted ~ i.e. scrolling is always required to view the full text after clicking the different panel selectors - which in my mind defeats the purpose of having an accordion - all the topics (panel selectors) should be visible, at least initially so the user can see what’s available at a glance. In your case You have four sections, the length of the div should match the initial open accordion panel plus the other three closed panel selectors - all should be visible in the viewport at once.

It’s been a while since I’ve used an accordion set-up, but is yours the “classic” all the text body panels have to be the same length? If this is so, and it is giving You spatial cramps, you could skip all of this restrictive interface malarkey and simply use an animated div.

Here is a web site I designed many election cycles ago and last year had to retrofit the client list because it had gotten so long. I wanted to avoid the classic accordion programming because it is under-thought and over-engineered (the two often go together).

Just below is the jQuery code set-up, easily adjustable~adaptable to the design and functionality of the web page. You’ll need to translate this to Hype of course.

The “Holder” divs are the client lists for that particular section (commercial design, commercial consulting, residential design). These Holder divs are contained in another “Header” div (e.g. “Commercial Design…” as on the sited web page above). Clicking on the Header div animates the associated Holder div which slides down, or up, as appropriate. (Please see attachment “AnimatedDiv.png”.)

$(document).ready(function() {
	$('#commercial_Design_Holder').hide();
	$('#commercial_Consult_Holder').hide();
	$('#residential_Holder').show();
	$('#commercialDesign_Header').click(function() {
		$('#commercial_Design_Holder').toggle(1000);
		$('#commercial_Consult_Holder').slideUp(1000);
		$('#residential_Holder').slideUp(1000);	
	});
	$('#commercial_Consult_Header').click(function() {
		$('#commercial_Design_Holder').slideUp(1000);
		$('#commercial_Consult_Holder').toggle(1000);
		$('#residential_Holder').slideUp(1000);
	});
	$('#residential_Header').click(function() {
		$('#commercial_Design_Holder').slideUp(1000);
		$('#commercial_Consult_Holder').slideUp(1000);
		$('#residential_Holder').toggle(1000);
	});
}); // end ready

_"AnimatedDiv.png"_
AnimatedDiv.png788×360 50.8 KB
1 Like
4

Thanks for the help.

I see how this works for adding text.

I am struggling to understand how I can use the accordion with my existing menu.

i.e. put the top 2 buttons / then the next set etc.

Is this possible.

I also had a play with Jquery slideToggle which does what I need but I cannot get the divs below to ‘move up’.

Is this a setting for the flexible layout ? I have tried various settings.

Cheers

Steve Warby

accordianTest.hype.zip (105.5 KB)

5

Hi Guys I am back on this again.

I have what I need working is working in the HTML widget on the right. i.e. the paragraph folds and the remaining elements rise up.

I know this can be done in the HTML Element but I need to be able to do it whilst using images / text etc within the hype environment.

So why does my ‘fold’ code not work the same as the HTML widget.

Any help appreciated.

accordianTest.hype.zip (103.5 KB)