By intu.cz on

Hi! I would like to use the "collapsible" content effect from /admin/settings on a node page, but not necessarily in a form. What I would like to achieve is

If you click on this text

The following text will appear in a box, 
perhaps with a different background, as an ex
planation for the brief version, and disappear 
on another click on the text above

I know the /admin/settings uses /misc/collapse.js. Can this javascript be used for something like this and how? Thanks for any help. Roman

⋅ Categories: Drupal 4.7.x

Comments

Jimmy Neutron’s picture

Jimmy Neutron commented

I think my question is kinda related to this as well:
http://drupal.org/node/60467

nevets’s picture

nevets commented

I just used the 4.7 forms API and used a fieldset to surround the content and generated the output with drupal_form_get. So while it is technically a form, it has no input fields and no submit button. It provides a quick way to do what you want.

Jimmy Neutron’s picture

Jimmy Neutron commented

Thanks nevets.

Using aurka's example, if there was no content entered into the fieldset, then I presume the fieldset would not display anything in the page?

I've had a look for the Forms API, but could not see it on the Modules list for Drupal 4.7. :(

nevets’s picture

nevets commented

To find information on the form API's goto 'Drupal's APIs' in the handbook, select HEAD, then files. Scroll down (almost to the end) and you will a quick start guide and a reference for the form API's.

intu.cz’s picture

intu.cz commented

Thanks for the suggestion, I looked at Forms API - the Quickstart Guide - and unfortunately my lack of e-wisdom prevents me from understanding how to use it for my purpose. What I tried to do was:

- while editing the page I tried to stick some code from the Quickstart Guide, but nothing desired happened. And there was no collapse.js loaded when I looked at the page. The code was the bit with something like "collapsible = 'true'"... I must have missed something important...

Do you know of any examples which would help more specifically with putting "something" collapsible on a normal page (or article)..?

Now I am going to try and use the trick from CSS Play, if that works I'll come back...

UPDATE: It does what I want using just css and a litttle bit of javascript.

bohtho’s picture

bohtho commented

Does someone have an implementation for this when it comes to teasers ? When clicking the title of the node (or Read more link) the full text of the node expands using CSS/javascript (or even Ajax).

I'm thinking that the javascript is already there, but how can I make the node page load full nodes instead of just teasers, and also how to automagically set the expand link after desired teaser length and correct div's around rest of the content ?

phildog’s picture

phildog commented

Now I am going to try and use the trick from CSS Play, if that works I'll come back...

UPDATE: It does what I want using just css and a litttle bit of javascript.

Aurka - would you mind sharing the code you ended up using? I have a similar need.

thanks!

intu.cz’s picture

intu.cz commented

Hello, the code is at the provided link (CSSPlay). The code is used on intu.cz/preklady. The CSS part in my style.css is 

/*SHOW ME MORE*/
/* .holder {width:210px; margin:5px; padding:1em; border:1px solid #ddd; float:left;} */
.holder {width:300px; float:left;}
/* .holder h2 {text-align:left;} */
a.hid {color:#000; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {padding-left:5px; display:block; background:#eee; color:#000; width:100%; font-style:normal; cursor:default;}
.clear {clear:both;}
/* end   */

and the actual code on the page is 

<tr><td width="40%">normostrana (ns)</td><td><div class="holder">1800 znaků včetně mezer c&iacute;lov&eacute;ho textu <a onblur="this.hideFocus=false" onclick="this.hideFocus=true" href="#more" class="hid"><span>(n&aacute;pověda &raquo;)</span><em>Např. v programu MS Word či OpenOffice.org Writer zj&iacute;st&iacute;te počet znaků včetně mezer přes menu <strong>N&aacute;stroje</strong> &raquo; <strong>Počet slov</strong> &raquo; &uacute;daj <strong>Znaky (včetně mezer)</strong> ve Wordu nebo <strong>Znaky</strong> ve Writeru.</em></a></div></td></tr>

But recently I installed a module called Javascript Tools, which might provide better solutions to needs such as these (I have still to try it... so it's just a feeling). Incidentally, a fellow drupaller said the CSSPlay solution doesn't work with Safari...

yvelle’s picture

yvelle commented

If you just want to add collapsible fieldset tags to a node, just remove your filters and make sure to include the script calls in your node.

<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/misc/collapse.js"></script>
<form method="post">
<div>
<fieldset class=" collapsible collapsed"><legend>TEST TITLE</legend>
<div class="form-item">test</div>
</fieldset>
</div>
</form>
bohtho’s picture

bohtho commented

Could this code be added to node.tpl.php so all read more-links behave this way ? How ? I am just learning ...

Anonymous’s picture

Anonymous (not verified) commented

Hi !
This code doesn't work for me...
When I load the page the fieldset is collapsed as it should be but the content of my div is displayed just under it.

When I click on the legend link, the content is now displayed in the fieldset as it should be...

Can you tell me what can happen ?

Thanks a lot.

Matt

Arundel’s picture

Arundel commented

This works nicely, but note the following (I'm testing in 4.7):

  • there should be no leading space in the class= attribute. class="collapsible collapsed"
  • make sure to check your paths, /misc/ might not be your root-relative link.
  • make sure these files aren't already loaded by your user theme. It might have visual glitches if the JS is called twice, especially while previewing content.
  • as Yvelle says, make sure your Input Format isn't breaking it with "Filtered HTML". Also, "Lines and paragraphs break automatically" may wrap paragraph tags around any "unrecognized" tags, and anything with hard returns. ie: <p></fieldset></p>. May not kill the script, but invalid HTML.
  • those still using Internet Explorer 5 for Mac (yes Virginia, they do exist) experience issues with stacked classes: "class1 class2" May not behave as expected (applies to Drupal's CSS in general. ;-).
  • Also regarding CSS, in Safari 2.0.4 the horizontal border may appear *above* the legend when collapsed, and through it when open.

    In my theme, a variant of Pushbutton under 4.7, the following code works well, even though "Lines and paragraphs break automatically" does add extra p's around both fieldset tags:

    <fieldset class="collapsible collapsed"><legend>TEST TITLE</legend><p>test</p></fieldset>
<script type="text/javascript" src="/pathtomysite/misc/drupal.js"></script>
<script type="text/javascript" src="/pathtomysite/misc/collapse.js"></script>

    I like to keep script tags far at the bottom if functional.
    -A

jeff h’s picture

jeff h commented

Not sure how correct it is to include JS in the above manner. The better "Drupal way" (tested in 4.7) would be as follows:

<?php 
  drupal_add_js('misc/collapse.js'); 
  drupal_add_js('misc/drupal.js'); 
?>
<fieldset class="collapsible collapsed">
  <legend>TEST TITLE</legend>
  <p>test</p>
</fieldset>

Using the drupal_add_js() function means that these JS files won't be included twice or anything bad like that :) It also looks after all your paths so your site won't break if you move it from one location on your server to another.

Jeff

_________
http://marmaladesoul.com

apt94jesse’s picture

apt94jesse commented

This solution works great for me, thanks a lot!

Is there a way to expand a box that is not directly underneath the legend tag? I have a horizontal menu with several options. I want one of those options to expand a box under the menu, not under the specific menu option.

Thanks in advance.

-Jesse

mixersoft’s picture

mixersoft commented

<fieldset class="collapsible ">
correctly puts the content in box, but there is no javascript to collapse/expand the box itself.

<fieldset class="collapsible collapsed">
collapses the box, although some of the content ("Current State:") is displayed below the horizontal line. However, there is no control or link to expand the box. what's wrong?

here is the actual html output from my code:

<?php
  drupal_add_js('/devspace/drupal/misc/collapse.js');
  drupal_add_js('/devspace/drupal/misc/drupal.js');
?>
<fieldset class="collapsible "><legend>Workflow Summary</legend>Current state: <strong>QA</strong><br>
<table class="workflow_history">
...
</table>
</fieldset>

I added a full path name to the javascipt files

jeff h’s picture

jeff h commented

Sorry this reply is a bit late, but hopefully better late than never :)

The first thing I would check is whether the javascript files are actually getting loaded into your page. To do this, in your browser visit the page containing your code above, then view any errors reported by the browser; your browser should tell you if it couldn't find the .js files.

Jeff

_________
http://marmaladesoul.com

Zoologico’s picture

Zoologico commented

Jeff H's code worked great.

This:

  drupal_add_js('misc/collapse.js');
  drupal_add_js('misc/drupal.js');


TEST TITLE

test

Thanks!

missym’s picture

missym commented

Hi Jeff --

I'm doing something like this but a bit more elaborate


** in php
drupal_add_js('misc/collapse.js');
drupal_add_js('misc/drupal.js'); 
**


<fieldset class="collapsible collapsed">
  <legend>TEST TITLE</legend>
  <table><tr><td>some stuff</td><td>More stuff and a picture</td></tr></table>
</fieldset>

It shows the collapsed field sets and when I click on the legend, it opens up. All is good and everything is beautiful but when I try to close it, there it won't close back up. It stays expanded.

Do you think you could give me some direction on this?

Thanks --

Missy.

dvessel’s picture

dvessel commented

This may be minor to most but keep in mind those collapsible fieldsets are made for forms. It's semantically incorrect and your pages will not validate.

Another alternative is to use jQuery directly (it should be simple) or look at this:

http://drupal.org/node/131959

amardeshbd’s picture

amardeshbd commented

Awesome!! I was looking for something similar in Drupal 6.

- HK.info @ XTX