Indexhibit Support

Morning all,
I'd like to create expandable text at the top of an exhibit page, whereby the text would expand on click, and knock the thumbnails in the exhibition down the page. (Also doing the reverse if possible)

I've been searching heavily for this, and it seems that javascript is the only way to do it. All the workarounds on the forum are also for the legacy format, so perhaps a new thread could be useful. Is there any code within the current setup that can be referenced to make this happen or will I have to upload an appropriate js file and just use html on each individual page?

I've created a bit of a ghetto hover button here, giampieroassumma.com/work/lourdes/, but it's not really what I'm after, plus it sticks out on top of the slideshow when expanded. Stupid really.

Anyways, if anyone could point me in the right direction, it would be much appreciated.

Much love

Hello!
...search the web for "toggle jquery" to start with...
;-)

Jquery toggle is really easy to use - I love Jquery.

There are much nicer ways to implement this, but this would do the trick...

1. <a href = '#' onclick = " $('.simonsays').toggle(); return false; ">Click </ a >

And then, wrap all of your text (in the textarea) in a div - be sure to use a full break before and after the part that needs to expand.

1. <div class='simonsays'> ... </div>

Slideshow isn't done, and because of how it's engineered it might not be a good candidate to be used with this.

Forgive the extra spaces in the link - I'm just trying to get by our forums auto url thing.

Oof, long day at the office... last strands of energy left.

Thanks for the great response chaps, points for toggle title :) The way I managed to get it to work was to paste both parts of the above code in the text-section of the exhibit. However, when doing so, the toggle appears the wrong way around, with the text already being 'out', as opposed to hidden at first.

Perhaps I'm being a bit naive :P

You'll need to put a display none on the div.

ok great, got it done :) a little messy i agree in the text area, but works a charm. going to delve a lot deeper into understanding jquery.

also, for anyone in the lurch on a similar steez:
you change .toggle to .slideToggle for posher animation effects, or probably any other jquery toggle effect for that matter

I'm interesting in insert this on my web for show/hide the text of the projects.

linuesa.net/index.php/photo/matices/

I tried putting the code as Vaska says but can not get it to work properly. I do not get to do when you say "You'll need to put a display none on the div". My idea of ​​CSS / JQuery is zero ... : P

Now I have is:

1. <a href ='#' onclick = "return false; "> $('.simonsays').toggle(); SHOW / HIDE INFO 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui vel Morbi suscipit nunc ac massa faucibus ut. Etiam sagittis id lacus. Tempus vitae Sed velit. Imperdiet Suspendisse aliquam tortor, et dictum scelerisque nec sapien. Congue Suspendisse eleifend sit amet libero cursus. Sed dui Tristique sed semper est just pharetra a gravida. Donec ac quam et tellus suscipit holder. Sed consectetur adipiscing gravida. Habitant morbi Pellentesque Tristique senectus et Netus et malesuada fames ac turpis egestas. Vivamus nunc augue, accumsan non elementum et, ut dignissim nisi. Phasellus magna ut erat id faucibus accumsan ac quis felis. In hac habitasse dictumst audience. Ut nunc ac metus pellentesque consectetur nec non at nisi. Proin gravida sagittis fringilla. Nunc tortor quam, malesuada semper nec non, pharetra enim eget.

What I want to achieve in the first place is that the text is hidden and when ONLY click the link "CLICK" text appears. Now it works, but all items in the exhibit are links (any text, images .... all).

Secondly I wonder if you can give the effect of the plugin "text expand" the menus to this kind of text ... would be great.

Thanks for your work.

Sorry I can't put the code...

1. <a href = '#' onclick = " $('.simonsays').toggle(); return false; "> SHOW/HIDE INFO 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nunc sed dui suscipit faucibus ut ac massa. Etiam id sagittis lacus. Sed vitae tempus velit. Suspendisse imperdiet aliquam tortor, et dictum sapien scelerisque nec. Suspendisse congue eleifend libero sit amet cursus. Sed tristique dui sed justo pharetra a semper est gravida. Donec et quam ac tellus suscipit porta. Sed adipiscing consectetur gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus augue nunc, accumsan non elementum et, dignissim ut nisi. Phasellus id erat ut magna faucibus accumsan quis ac felis. In hac habitasse platea dictumst. Ut ac nunc nec metus pellentesque consectetur non at nisi. Proin gravida sagittis fringilla. Nunc quam tortor, semper nec malesuada non, pharetra eget enim.

can anyone help me?

as Vaska suggested on his last post you need to add a display: none; property in your simonsays div...

1. <div class='simonsays'  style="display: none;">...</div>

Sorry... I no have idea of CSS or JQuery.
It works with the display, but now everything in the exhibit it's a link to show/hide the text...

linuesa.net/index.php/photo/matices/

Any idea to fix it?

Why have you inserted the link four times - just take out the ones that are not needed.

Sorry for the link, and thanks for the info... but how I take out the ones that are not needeed?

close the a href tag properly...

<a href = '#' onclick = " $('.simonsays').toggle(); return false; ">Click </a >

...to find mistakes like these, next time validate your html: validator.w3.org/…

Thanks arsondpi it works perfect!!!
Sorry for these mistakes... I don't have any idea of CSS or HTML...

There is a way to put a effect like "Indexpand" on this?? How?

Cheers!

You can try this and see what happens...

1. $('.simonsays').toggle('1000'); return false;

simonjmp said it above: "you change .toggle to .slideToggle for posher animation effects, or probably any other jquery toggle effect for that matter"...