Toggling a DIV at the time

Hi there,

How do I display a list of things, example the "Posts" of the blog demo, but showing only the titles, but the content collapsed, and with a click being able to expand them back and forth, one at the time.

Thanks for you help!

First off, maybe you can use CJuiAccordion.

Otherwise, just output the blogs like normal, and say for instance your view is like this:




<div class="blog">

  <h2><a class="title" href="path/to/blog">Blog Title</a></h2>

  <div class="content">

    Blog content...

  </div>

</div>



Using Javascript, turn each blog post into an object having a collapsed/open state, and set the blog link to toggle the state. There are probably cleaner ways of doing it than this, but for the sake of example:




<?php

Yii::app()->clientScript->registerScript('blogCollapse',

  "$(document).ready(function() {

        $('div.blog').each(function() {

           new Blog(this);

        });

    });


    Blog = function (o) {

        this.hidden = false;

        this.target = $('div.content', o);

        var blog = this;


        blog.target.hide();


        $('a.title', o).click(function() {

            blog.Toggle();

            return false;

        });


    }


    Blog.prototype.Toggle = function() {

      if (this.hidden) {

        this.target.slideUp('fast');

        this.hidden = false;

      }

      else {

        this.target.slideDown('fast');

        this.hidden = true;

      }

    }

  ",

  CClientScript::POS_END

);

?>



thanks. I will study that widget.

Thanks a lot.