Expanding text

Topics: General
Aug 3, 2011 at 8:42 PM

Hi All,

I need following functionality:

Put Header of the text and then Details> reference.

When Details> is clicked then whole text should appear under Header.

How can i make that?

Thanks!

Aug 4, 2011 at 8:56 AM

Hello, Olga

Your question is not very clear. But If you want something like text collapsing(toggling) so it can be done by using jQuery+CSS - just check this article as example - http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

Aug 8, 2011 at 11:55 AM

Inna,

thank you a lot. It is what i need.

Next question is about some divs (paragraphs) under the Heading.

Should i change jscript-function?

Aug 8, 2011 at 12:18 PM
olga_titova wrote:

Next question is about some divs (paragraphs) under the Heading.

Should i change jscript-function?

Sorry, I didn't understand this question. What do you mean by "some divs(paragraphs) under Heading" and "change jscript-function"?

Aug 8, 2011 at 12:53 PM

You sent me the article describes how to collapse text.

In the example we have Heading class and Content class. And jscript function is used to apply hide/show text marked as Content.

It works Ok (only in 1st step reference was changed to 1.4.2 instead of 1.3.2). But in the example 1 div can be Heading and then only 1 div can be Content.

I need some divs of Content class under the same Heading.

How can i make that?

Thanks!

Aug 8, 2011 at 1:45 PM

 

You should have some Javascript skills to implement what you wish.

1. The provided example expects that you have one DIV with content class under the corresponding heading class and within this DIV you can have other DIVs with content
<p class="heading"> Heading-1</p> <div class="content"> <div> some text 1</div> <p> some text 2</p> <div> some text 3</div> </div> <p class="heading"> Heading-2</p> <div class="content"> .... </div>

2. If you wish to have several DIVs with content class under the same heading class and then by clicking collapse all content DIVs,
the javascript function and markup should be changed something like this:
<p class="heading">
		Heading-1</p>
	<div class="contents">
		<div class="content">content 1</div>
		<div class="content">content 2</div>
		<div class="content">content 3</div>
	</div>
<p class="heading">
		Heading-2</p>
	<div class="contents">
		<div class="content">content 1</div>
		<div class="content">content 2</div>
		<div class="content">content 3</div>
	</div>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();

  jQuery(".heading").click(function()
  {
    jQuery(this).next(".contents").find(".content").slideToggle(500);
  });
});
</script>


 


 

Aug 8, 2011 at 2:06 PM

Inna, Thank you!

In current version of my case i used code from the article and changed <div>-s to <p>-s. And it works ok (with 1 paragpraph under heading).

I didn't want to change default <p> to <div> in Visual Editor (as i understodd they cannot be used both).

And it was easy for users - they wnat to edit pages in Visual mode using the classes from drop-down menu.

As i see described case is good decision for developers but in Visual mode is impossible. Am i right?

Aug 8, 2011 at 2:23 PM

Seems to be I found a very useful in this question jQuery function - nextUntil() - http://api.jquery.com/nextUntil/

<p class="heading">Heading-1</p>
        <p class="content">content 1</p>
        <p class="content">content 2</p>
        <p class="content">content 3</p>
<p class="heading">Heading-2</p>
        <p class="content">content 1</p>
        <p class="content">content 2</p>
        <p class="content">content 3</p>

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();

  jQuery(".heading").click(function()
  {
    jQuery(this).nextUntil(".heading", ".content").slideToggle(500);
  });
});
</script>

Aug 8, 2011 at 11:02 PM

Thank you, it is what i needed :)