3 Replies - 462 Views - Last Post: 17 April 2013 - 03:43 PM

#1 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 196
  • Joined: 27-April 11

Collapsing content problem

Posted 17 April 2013 - 02:43 PM

I am trying to expand and collapse content on click on the page and it doesn't seem to work.. Any help will be appreciated!

My code:

<div class="collapsible">
Text 1
<div>
Hidden Text 1
</div>
</div>


Javascript file connected to the page:

$('.collapsible').children().hide();
		$('.collapsible').click(
			function(e)
			{
				if ($(this).children().css('display') == 'block')
				{
					$(this).children().hide();
					$(this).css('background-image', 'url(/img/ico_expand.png)');
				}
				else
				{
					$(this).children().show();
					$(this).css('background-image', 'url(/img/ico_collapse.png)');
				}
			}
		);


Css file connected to the page:

div.collapsible			{ margin-top:7px; padding-top:7px; padding-left:16px; background-image:url(/img/ico_expand.png); background-repeat:no-repeat; background-position:0% 10px; border-top:1px solid #eeeeee; }
div.collapsible div		{ margin-top:5px; margin-bottom:5px;}


Is This A Good Question/Topic? 0
  • +

Replies To: Collapsing content problem

#2 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,926
  • Joined: 30-April 10

Re: Collapsing content problem

Posted 17 April 2013 - 03:10 PM

It works fine here

Have you added the jquery and jquery-ui libraries before your script?

Is the html presented the only thing in your html document, if so it is not properly formed.

This post has been edited by laytonsdad: 17 April 2013 - 03:17 PM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,499
  • Joined: 12-December 12

Re: Collapsing content problem

Posted 17 April 2013 - 03:19 PM

Is your jQuery code in the document.ready event? That is, does it wait for the page to load.

Alternatively, place the script at the bottom of the page, just before the closing body tag.
Was This Post Helpful? 1
  • +
  • -

#4 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 196
  • Joined: 27-April 11

Re: Collapsing content problem

Posted 17 April 2013 - 03:43 PM

It works fine now.. I thought i had the jquery-ui and jquery embedded on the page but i didn't... thanks alot guys
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1