TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 629
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 513
  • Total: 513

Accordion Style Menu Block

Started by Megaforum, October 20, 2007, 05:23:32 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages 1 ... 5 6 7
User actions

Dragooon

#50
October 29, 2007, 03:33:23 PM
Quote from: Hairy on October 29, 2007, 02:37:24 PM
:buck2: I think I can live without it, Thanks for the explanation though  ;)
Lol Told ya ;).

iGate

#51
October 30, 2007, 06:11:50 AM
Quote from: IchBinâ,,¢ on October 29, 2007, 02:26:16 PM
Yeah, you need to go through the javascript and rename all the functions. Then in your HTML call the id with the new naming scheme. Sounds easy right? :)

anyone want to do some community service?

MinasC

#52
December 12, 2007, 06:24:57 PM
i did all the changes described in the first post but it didn't work ! it appears not to be reading style.css and it's not hidden ! any ideas ?

MinasC

#53
December 12, 2007, 06:44:52 PM
Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add
Code Select

global $context, $settings, $options, $scripturl, $txt, $user_info, $modSettings;

// The Style.css and the Javascripts.
echo '
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">


.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.element {

}

.element p {
margin: 0;
padding: 4px;
}

.float-right {
padding:10px 20px;
float:right;
}

blockquote {
text-style:italic;
padding:5px 0 5px 30px;
}


</style>
<script type="text/javascript" src="mootools-accordion.js"></script>

<script type="text/javascript">
window.onload = function() {
var accordion = new Accordion(\'h3.atStart\', \'div.atStart\', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle(\'color\', \'#ff3300\');
},

onBackground: function(toggler, element){
toggler.setStyle(\'color\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

i used this and worked but it shows all divs open ! shouldn't they all be close and open on click ?

Quote from: Dragooon on October 25, 2007, 07:51:47 AM
Updated to support Validation.

what do you mean by validation ? are you refering to php version i quoted above ?

thnx a lot !

Dragooon

#54
December 13, 2007, 04:04:23 AM
You don't have to do that, use the edits shown in first post.
Also have you uploaded the file?

MinasC

#55
December 13, 2007, 06:35:50 PM
i did use the edits in the 1st post (and uploaded the file) but didn't work ! php comes better to me but it shows all divs open !
(what about validation , what is it ?)
thnx !

Dragooon

#56
December 13, 2007, 06:45:10 PM
xHTML Validation.
Hmm...Are you sure the file is at the root?

MinasC

#57
December 13, 2007, 06:47:31 PM
yes i am ! i even tried the whole url address ...

Dragooon

#58
December 13, 2007, 06:55:51 PM
Can I Have a link to your forum.

MinasC

#59
December 14, 2007, 12:06:05 AM
sure , http://ntrl2.no-ip.org but i have to tell you i deactivated the block ! i couldn't have members looking at it while i was experimenting ...
Print
Go Up Pages 1 ... 5 6 7
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.