Show Hide Content In A View

Hi…

I have a pretty basic view that gets data from the dataprovider and simply spits out two fields

title and content

I would like to only show the Title with a "show content" link next to it and have the full content appear if the user selects it.

is there a nice clean way to this inside the view?

here’s the actual code I’m using for this view if it helps


<div class="view no-border">

<?php 

if(getLang() == "fr"){

	$title = $data->faq_title_fr;

	$content = $data->faq_content_fr;

}else{

	$title = $data->faq_title_en;

	$content = $data->faq_content_en;


}

?>




	<?php echo "<div class = 'faq_title'>".CHtml::encode($title). "</div>" ?>


	<?php echo "<div class = 'faq_content'>".CHtml::decode($content)."</div>"; ?>







</div>



I think you will need to delve into JavaScript to toggle a ‘show/hide’ in the class of the content DIV. It’s been awhile since I did this so I can’t give any help, but I remember finding it on the Web.

You could also try the CJuiAccordian.




<?php

		Yii::app()->clientScript->registerScript('toggle', "

		$('#faq-title').click(function(){

			$('#faq-content').toggle();

			return false;

		});");?>

		<div class="faq_title">

			<a href="#" id="faq-title"><?php echo'$title;?></a>

		</div>

		<div id="faq-content" class ="faq_content" style="display: none;">

			<?php echo $content;?>

		</div>



also how your are translating and setting default language maybe painful and time consuming over a large application

i would reccomend looking at Yii Internationalization you can set the default user language too with the following Set user Lang.

thanks… .but it only works for the first instance… doesn’t the ID need to be unique? in other words if I have 5 titles (each with its own content) they would all need a seperate ID?

in the JS , you set this to the content div

#faq-content

but should it be?

#faq-content1

#faq-content2

#faq-conten3

etc.

I have a faq_id that is unique in the DB that I could tag along… .but how would you go about adding that to the JS?

I believe you can use the class of the div in the Script


<?php

                Yii::app()->clientScript->registerScript('toggle', "

                $('.faq-title').click(function(){

                        $this.toggle();

                        return false;

                });");?>

It’s not tested…but…

Change the ‘#’ to ‘.’ and then I think you can reference the title that was clicked via ‘$this’. I know it can be done, I have done it before, just don’t remember where so as to post example.

I once built a FAQ with jQuery:




<?php

$script = <<<EOT

$(document).ready(function(){

	$("li[id^='q']").click(function(){

		$('.active').not(this).each(function(){

			$(this).removeClass('active');

			$(this).children('ul').toggle('slow');

		 });

		$(this).toggleClass('active').children('ul').toggle('slow');

	});

});

EOT;

	

	Yii::app()->clientScript->registerScript('faq', $script);


?>


<h1>F.A.Q.</h1>


<ul class='faq'>

<?php

foreach($faqs as $faq){

	$attr = $faq->attributes;

	

	echo "<li id='q". $attr['id'] ."'> \n\t ". $attr['question'] ."\n".

		"\t<ul class='answer' id='a". $attr['id'] ."'>\n".

		"\t\t<li>	". $attr['answer'] ."	</li>\n".

		"\t</ul>\n </li>";

}


?>

</ul>

It is cleaner when you put the script in another file and stuff, but it does work.

So I create a list item with in a list-item a nested list item, wherefore I can easily

open it. However, you might want to do it with <divs> which will be relatively similar in

use.

One feature I built in is that all the other open questions close before you open the clicked one.

Hope this might help you.

well, that’s exactly what I’m looking for! I can’t try right now but later tonight I will give this a go!

thanks a lot for posting the full code!




<?php

                Yii::app()->clientScript->registerScript('toggle', "

                $('#faq-title').click(function(){

                        $('#faq-content, #id_field_2, #id_field_3, #id_field_4, #id_field_5').toggle();

                        return false;

                });");?>

                <div class="faq_title">

                        <a href="#" id="faq-title"><?php echo'$title;?></a>

                </div>

                <div id="faq-content" class ="faq_content" style="display: none;">

                        <?php echo $content;?>

                </div>

The buttons id will need to be #faq-title or you can add numerous ones.