Show Hide Content In A View

Yii 1.1 General Discussion
1

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>
2

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.

3 



<?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.

4

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?

5

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.

6

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.

7

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!

8 



<?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.