Toggle BBCode

[ThE KuKa]

Toggle BBCode please...

Hi!

@ Stoker... Do you could share the code of this BBCode?

Regards.

[Blackwolf]

custom-bbcodes/?start=180

[ThE KuKa]

Thanks Blackwolf, but CSS edits?

[Stoker]

Im not sure this is all of it:

Code: Select all

h2.trigger {
	padding: 0 0 0 50px;
	margin: 0 auto;
	background: url("{T_THEME_PATH}/images/h2_trigger_a.gif") no-repeat;
	height: 46px;
	line-height: 46px;
	width: 450px;
	font-size: 2em;
	font-weight: normal;
}
h2.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 auto;
	border: 1px solid #d6d6d6;
	background: #f0f0f0;
	overflow: hidden;
	font-size: 1.2em;
	width: 490px;
	clear: both;
}

.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
}

and some jquery is also needed.
To be used within a document ready function:

Code: Select all

//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 

	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("h2.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; //Prevent the browser jump to the link anchor
	});

Should be all.

[ThE KuKa]

Thanks Stoker!

[systemcrack]

Im not sure this is all of it:

Code: Select all

h2.trigger {
	padding: 0 0 0 50px;
	margin: 0 auto;
	background: url("{T_THEME_PATH}/images/h2_trigger_a.gif") no-repeat;
	height: 46px;
	line-height: 46px;
	width: 450px;
	font-size: 2em;
	font-weight: normal;
}
h2.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 auto;
	border: 1px solid #d6d6d6;
	background: #f0f0f0;
	overflow: hidden;
	font-size: 1.2em;
	width: 490px;
	clear: both;
}

.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
}

and some jquery is also needed.
To be used within a document ready function:

Code: Select all

//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 

	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("h2.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; //Prevent the browser jump to the link anchor
	});

Should be all.

Really nice this bbcode!!! but I did not understand which files I have to apply these changes.

[Stoker]

The first part is css, so ad it to colours.css
Next part goes in overall_header.html - In your case BEFORE $("a.cross").click(function() {

[systemcrack]

Thank's a lot!

[systemcrack]

Hello Stoker, even I have switched to the new version of the board, I can not do work properly, this beautiful bbcode..
I created a file.css where I added all the changes to my style including:

Code: Select all

h2.trigger {
   padding: 0 0 0 50px;
   margin: 0 auto;
   background: url("{T_THEME_PATH}/images/h2_trigger_a.gif") no-repeat;
   height: 46px;
   line-height: 46px;
   width: 450px;
   font-size: 2em;
   font-weight: normal;
}
h2.trigger a {
   color: #fff;
   text-decoration: none;
   display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
   margin: 0 auto;
   border: 1px solid #d6d6d6;
   background: #f0f0f0;
   overflow: hidden;
   font-size: 1.2em;
   width: 490px;
   clear: both;
}

.toggle_container .block {
   padding: 20px; /*--Padding of Container--*/
}

I have pasted the image in images/h2_trigger_a.gif
Finally I tried to paste the code in overall_header.html

Code: Select all

//Hide (Collapse) the toggle containers on load
   $(".toggle_container").hide(); 

   //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
   $("h2.trigger").click(function(){
      $(this).toggleClass("active").next().slideToggle("slow");
      return false; //Prevent the browser jump to the link anchor
   });

...but not work



Could you help me to restore it please.

P.s.
Forum and browser cache were clean

[Stoker]

Code: Select all

{T_THEME_PATH}

Doesnt exist in 3.1
You can look in the css files and see how its done.

The script goes in the footer, not header.
Thats how i did it.