By juc1 on

Hi all,

I am trying to get text (for a View) which starts collapsed / hidden but which displays after clicking on 'more details', something like this...
http://tinyurl.com/7qz6z5s

I followed the instructions here
http://willhallonline.co.uk/blog/collapsible-fieldsets-drupal-7-nodes

I amended the bottom of my template.php =

http://jarabic.co.uk/templatephp.txt

my html = http://jarabic.co.uk/html2.jpg

result = http://jarabic.co.uk/legend

Can anyone please suggest how I can get the text to start off hidden / collapsed ie requring a click to display?

Thank you

⋅ Categories: Drupal 7.x

Comments

Patroclas’s picture

Patroclas commented

It may not be exactly what you want but maybe look at Views Accordion?

http://drupal.org/project/views_accordion

juc1’s picture

juc1 commented

Ok thanks I will take a look but anyway what I am trying to do is something like this where it says 'more details'
http://tinyurl.com/7qz6z5s

thanks

efc84’s picture

efc84 commented

i had a similar problem,

i did try a module called 'collapse text' but this broke my website (so try at own risk and make sure the website is backed up).

I did find two java scripts that might help - the first one is similar to the more details on the lipsdoctor website

// JavaScript Document
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->

I can't find the actual HTML & CSS that goes with this one, sorry.

And the second one that i am currently using is an accordion effect

CSS

* {margin:0; padding:0}

#accordion {width:503px; margin-top:-100px; auto;}
.accordion {width:503px; font:12px Helvectica,Arial; color:#000;}
.accordion dt {width:503px; padding:8px; margin-top:5px; cursor:pointer; background-color: #4DBFB2; color: #fff;}
.accordion dt:hover {background-color: #3D988E;}
.accordion .open {background-color:#3D988E;}
.accordion dd {overflow:hidden; background:#fff;}
.accordion span {display:block; width:469px; border-top:none; padding:15px;}
.accordion ul{list-style-type: none;padding: 0px;margin: 0px;}
.accordion li{background-image:  url(/images/arrowr.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 20px;
}

and the JS

var accordion = function () {
    var tm = sp = 10;
    function slider(n) { this.nm = n; this.arr = [] }
    slider.prototype.init = function (t, c, k) {
        var a, h, s, l, i; a = document.getElementById(t); this.sl = k ? k : '';
        h = a.getElementsByTagName('dt'); s = a.getElementsByTagName('dd'); this.l = h.length;
        for (i = 0; i < this.l; i++) { var d = h[i]; this.arr[i] = d; d.onclick = new Function(this.nm + '.pro(this)'); if (c == i) { d.className = this.sl } }
        l = s.length;
        for (i = 0; i < l; i++) { var d = s[i]; d.mh = d.offsetHeight; if (c != i) { d.style.height = 0; d.style.display = 'none' } }
    }
    slider.prototype.pro = function (d) {
        for (var i = 0; i < this.l; i++) {
            var h = this.arr[i], s = h.nextSibling; s = s.nodeType != 1 ? s.nextSibling : s; clearInterval(s.tm);
            if (h == d && s.style.display == 'none') { s.style.display = ''; su(s, 1); h.className = this.sl }
            else if (s.style.display == '') { su(s, -1); h.className = '' }
        }
    }
    function su(c, f) { c.tm = setInterval(function () { sl(c, f) }, tm) }
    function sl(c, f) {
        var h = c.offsetHeight, m = c.mh, d = f == 1 ? m - h : h; c.style.height = h + (Math.ceil(d / sp) * f) + 'px';
        c.style.opacity = h / m; c.style.filter = 'alpha(opacity=' + h * 100 / m + ')';
        if (f == 1 && h >= m) { clearInterval(c.tm) } else if (f != 1 && h == 1) { c.style.display = 'none'; clearInterval(c.tm) }
    }
    return { slider: slider }
} ();

and the html would be 

<dt>Title</dt>
<dd><span>
<p>some text</p>
</span></dd>

<dt>Title 2 </dt>
<dd><span>
<p>more text</p>
</span></dd>

I managed to use the text editor and have this effect appear as my content in the center of the page, hope some of that helps, any questions please ask.

willhallonline’s picture

willhallonline
Primary language English
Location Cambridge, UK
commented

Collapse Text module doesnt seem to work, so I wouldn't bother.

basically just add "collapsed" into the fieldset class to make it start collapsed

<fieldset id="fieldset-id" class="collapsible collapsed">
<legend><span class="fieldset-legend">Fieldset title</span></legend>
<div class="fieldset-wrapper">
<div class="fieldset-description">Fieldset description</div>
Fieldset content
</div>
</fieldset>
juc1’s picture

juc1 commented

@ willhallonline

Yes that works, thanks for your help. I tried the collapse text module already but it didn't seem to work for me.

Can I please ask about your code comment:
'This function looks for node 1 and only adds the javascript for this. However it can be extended in different ways if required.'

Is there some restriction on where your code will work? I have tried it in different nodes without amending template.php and it seems to work fine.

Thanks

willhallonline’s picture

willhallonline
Primary language English
Location Cambridge, UK
commented

What I was meaning by "This function looks for node 1 and only adds the javascript for this. However it can be extended in different ways if required." is that the statement looks for the node_id and if it is number 1 then it enables the javascript and such like. However, you could adjust the if statement to give a multitude of results (selecting on user/theme/node type etc).

You could remove the if statement if it is being used on every page of the site (in a block or such like) but I thought it was better to restrict to just the certain nodes that it was applicable to.

Hope that helps.

webalchemist’s picture

webalchemist commented

Hi folks, I had a lot of trouble with my collapse fields also.

I was trying to use collapse on a page that did not have a form.

If you are doing it on a form, form.js may already be included.

It seems there are two main parts:

  • making sure you have the html correct
  • making sure you have included two js files

Once you have used the proper code to invoke the collapse box:

You can specify a condition in preprocess to add these files on a particular page.

Here's what I did to include them on every page of my website. This is not the best method, but it worked for me.

I had the most trouble with getting the js to appear. Even after I had invoked drupal_add_js in many places, it was not working for me until I added it specifically in the template.php document under function THEMENAME_preprocess_html

THEN I was able to see that collapse.js was being added to the HEAD section of my page.

IF collapse.js IS NOT in the HEAD section of your page, then collapse will never work.

Goodluck.

function bartik_preprocess_html(&$variables) {

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

...<snip>...

P.S. if you want to start with the box closed, just include the class: collapsed in the html