Yuu

42

88, les go

Updated - I've updated the OP with better code! Now using less lines of jQuery, and you can now also use multiple accordions throughout your site instead of 1! Here's a screenshot:

Updated - I've updated the OP with better code! Less messy, and (if you ignore the comments and blank lines) it now uses almost half as many lines of jQuery!

Update - I've updated the OP with better code! The previous one was a bit ehh, but this version should be much better (it's also 6 lines shorter). You can also now use it multiple times on a single page! Here's an example screenshot: I also swapped out the sliding effect with a fade effect, since a sliding effect on larger <div>'s may not work as well, but you can adjust that yourselves, if you wish. @Xing - In case you're interested.

If set up correctly, it could, yep.

Whoops, sorry for the late reply. You've probably figured this out by now, but I'll leave this here for others who stumble upon this later on. You create a bot and get its token by going to this page: https://discordapp.com/developers/applications/me Once you're on that page, click on "Create Application", fill in the info, and submit it. Once you submit the info, click on this button: Confirm the action and then you're done. After you click that, it'll look something like this: Click on the "click to reveal" button to grab your token, input it in the code, and you're done! One important thing to note is that you can use most of the code in this tutorial, but you'll need to adjust some parts of it. Here's an example code to get you started: const Discord = require("discord.js"); const bot = new Discord.Client(); bot.on("ready", () => { // Once the bot is ready, let us know by logging this message into the console console.log("Bot is connected!"); }); bot.on("message", (msg) => { // If the message that was sent is exactly equal to "!ping"... if (msg.content == "!ping") { // Send a message inside the same channel that say "Pong!" msg.channel.sendMessage("Pong!"); } }); bot.login("YOUR_ACCOUNT_TOKEN_GOES_HERE"); Of course, that's just a very, very basic ping/pong setup you can use to test if your bot is working. You can see the full reference of the documents by going to the Discord.js v9 docs page. Good luck, have fun!

Man oh maaaan, I discovered something so awesome yesterday. If you're on at least a couple Discord servers, you probably know what a bot is and that it can do some pretty cool stuff. But there's also this thing called selfbots, or basically, you are (partially) a bot. It's a bit confusing at first, but let me give you an example: I'm having a conversation on a server, and I want to send a ( ͡° ͜ʖ ͡°) face, but going out of my way to search it, copy, and paste it can get annoying. This is where selfbots come in. With regular bots, if you were to type a bot command such as /lenny, for example, it would trigger the bot command and the bot would send a lenny face. However, with a selfbot, you can make it so that your account sends that message. Before I go any further, I would just like to let you guys know that there are certain rules when it comes to selfbots. Here there are, be sure to read them before reading any furthe Source: https://eslachance.gitbooks.io/discord-js-bot-guide/content/samples/selfbots_are_awesome.html But enough of the introduction, let's get down to business. Setting Up The Bot Fortunately, it doesn't cost anything to set up a bot, you can just run it off your own computer if you want to. There are a few limitations with running it off your own computer vs a Virtual Private Server (VPS), but we'll get to that later. 1) You're gonna need something called a "token" in order for your bot to be able to login to your account. To do so, go to the following page: https://discordapp.com/developers/applications/me 2) Once you're on that page, you can either right click, click on Inspect Element, or press Ctrl + Shift + i on your keyboard. After that, click on the Console tab and enter the following piece of code in it: localStorage.token It should output a long string of letters and numbers. Copy the output result and paste it somewhere safe (Don't include the " marks at the end or beginning). 3) NOTE: IT IS VITAL THAT YOU DO NOT SHARE THIS WITH ANYBODY. IF SOMEONE GETS A HOLD OF YOUR TOKEN, THEY CAN SEND MESSAGES AND PERFORM MALICIOUS ACTS UNDER YOUR ACCOUNT. KEEP THIS IS MIND AT ALL TIMES. 4) Once you've saved your token somewhere safe, go ahead and create a new folder on your Desktop (or wherever you want) and name it "Discord Bot" (or anything else you want). 5) After that, you'll need to download something called Node.js. You can do so by going to their website and clicking on the v6.5.0 Current button. 6.5.0 may not be the latest version by the time you read this tutorial, but that's alright, just download whatever the latest version is. Downloading the 4.x series won't work though. Once you're finished downloading and installing, move on to the next step. 5.1) If you don't already have a code editor (Notepad++, Sublime Text, Atom, etc.), it is recommended that you get one. Of course, it's not required, you can use the default Notepad program, but it's a mess to do it that way. Here are some links for code editing programs I've used in the past and recommend: Atom - https://atom.io/ Notepad++ - https://notepad-plus-plus.org/ Sublime Text - http://www.sublimetext.com/ I currently use Atom and love it, but I only recently stopped using Notepad++ after 4 years, and I can say that both are great programs. Haven't used Sublime Text much so I can't speak there. 6) Go back to the "Discord Bot" folder you created. Once you're inside that folder, hold Shift and then right-click to open up the right-click menu. On there, you should be able to see an item listed as "Open command window here". Once you click that option, you should see something like this: 7) Once you have that up, type npm and press enter. This will check if everything installed. It should look something like this: If it looks something like that, you're good to move on. 8) Once done checking, you're gonna wanna type npm install discord.js and press enter. It'll take a short while to install, usually more or less around a minute, but you'll know when it's done installing. Note: If you receive some warnings at the end, such as "npm WARN {user} No description", feel free to ignore those, it should still have installed normally. After it's done, you can check if it successfully installed by typing npm list discord.js. If it returns something like -- [email protected], then it installed perfectly and you're almost ready to get your bot up and running! 9) Open up your code editor and make a new file. Inside of that file, copy/paste this: const Discord = require("discord.js"); const bot = new Discord.Client(); bot.on("ready", () => { // Once the bot is ready, let us know by logging this message into the console console.log("Bot is connected!"); }); bot.on("message", (msg) => { // If the person who sent a message was NOT us, ignore it if (msg.author !== bot.user) { return; } // If the message we sent equals "/lenny", ... if (msg.content == "/lenny") { // Wait 0.1 seconds... setTimeout(() => { msg.edit("( ͡° ͜ʖ ͡°)"); // And then edit the message to the actual lenny face }, 100); // 100ms = 0.1s // The reason for waiting for 0.1 seconds *before* editing // is because sometimes Discord glitches and "unedits" the message, andthis can prevent that } }); bot.login("YOUR_ACCOUNT_TOKEN_GOES_HERE"); Remember that token from earlier? Grab it again and copy/paste it to the very bottom line of that code, where YOUR_ACCOUNT_TOKEN_GOES_HERE is. Save the file as selfbot.js, or anything you want to, really. Just make sure to remember it. 10) Once you're done, go back to the command prompt and type node selfbot.js and wait a moment. If everything went well, the console will output "Bot is ready!". If so, you're good to go! If not, go back and re-read some of the steps and make sure you did everything accordingly. 11) Create a new server for yourself and name it whatever you want. When you're in that server, type /lenny and watch the magic happen. You now have your own selfbot set up! Selfbots are amazing because you can add your own custom and secret commands that aren't available by Discord by default and are only accessible by you. F.A.Q I know other languages but I don't know JavaScript - can I use a different language? Yep! There are other Discord API libraries out there for different languages. You can check them out by going to this link: https://discordapi.com/unofficial/libs.html However, do note that this tutorial won't apply to other language libraries. Where will these commands work? Anywhere and everywhere! As mentioned before, this bot is running under your account, so wherever you go, it follows. What are the downsides to running this on my computer as opposed to a Virtual Private Server (VPS)? Running it on your computer means that it relies your computer to be functional, connected to the internet (obviously), and have the command prompt window open at all times. With a VPS, your bot can be up and running 24/7, even with your computer on! So you can use your commands on your phone while in bed or away from home, for example. The only download is that most decent VPS' cost money. Fortunately, I have a solution for you! You can sign up via this referral link and get a free $10 to spend on a VPS, which goes up to 2 months worth! Digital Ocean is the VPS service I use, I would highly recommend it due to its ease of use, reliability, and cheap prices. You can also, of course, Google it yourself to see if you can find a free VPS out there, I'm pretty sure there's a few out there. Hope you guys enjoy!

Well, I was able to fix this issue by upgrading our 3.4.6 board to 3.4.9. I'm not sure about an actual solution though, because this wouldn't work if you're already on 3.4.9, sooo... But yeah, solved now I guess.

CometChat isn't nearly as convenient as Discord. Discord has a program for Windows, OSX, and Linux (?), a website which is nearly identical to their program, and smartphone apps for Androids and iOS devices. In terms of moderation, there's a lot more tools and features that help with that and makes thing simple and clean. It has so much more to offer and is better (and more appealing) than CometChat in pretty much every way. All in all, nice choice. We've been using Discord over at our site for about 4 or 5 months now I believe and it's an amazing app. Very powerful, always being updated, and so many useful features. Still lots of good things to come to, so there's always something to look forward to.

I tried installing an application on my board and I keep getting an error. I wasn't getting this error up until last night, and I'm not sure why this is happening because it was working perfectly fine less than 2 days ago. This is the error message I'm receiving: Fatal error: Class 'skin_global_121' not found in /home/lakevalo/public_html/admin/sources/classes/output/publicOutput.php(3846) : eval()'d code on line 3 I already tried Googling for an answer, but everything I found and tried didn't make a difference. I checked the publicOutput.php file and this is what's around line 3846: protected function _getSkinHooks( $name, $classname, $id ) { /* Hooks: Are we overloading this class? */ $hooksCache = ipsRegistry::cache()->getCache('hooks'); if( isset($hooksCache['skinHooks'][ $name ]) && is_array($hooksCache['skinHooks'][ $name ]) && count($hooksCache['skinHooks'][ $name ]) ) { foreach( $hooksCache['skinHooks'][ $name ] as $classOverloader ) { if( is_file( IPS_HOOKS_PATH . $classOverloader['filename'] ) ) { if( ! class_exists( $classOverloader['className'] ) ) { /* Hooks: Do we have the hook file? */ $thisContents = file_get_contents( IPS_HOOKS_PATH . $classOverloader['filename'] ); $thisContents = str_replace( $name."(~id~)", $classname, $thisContents ); ob_start(); eval( $thisContents ); ob_end_clean(); } if( class_exists( $classOverloader['className'] ) ) { /* Hooks: We have the hook file and the class exists - reset the classname to load */ $classname = $classOverloader['className']; } } } } return $classname; } Line 3846 would be this exact code: $thisContents = str_replace( $name."(~id~)", $classname, $thisContents ); I found a few answers that told me to upgrade or uninstall the Group Color on User Links hook, but I did both and the problem still persisted. If anybody knows why this is happening or has a solution, please let me know. Thank you!

float: center; does not exist. I think you're confusing it with text-align: center; which is probably the answer you're looking for in this case. You should post your HTML as well as your CSS so that we have a better idea of what it looks like (or even better: leave a link to your site so we can use inspect element to quickly figure out the answer). As mentioned, try using text-align: center;. However, text-align won't work unless if your HTML element possesses a display property of inline, or inline-block. If you're unsure, add this: display: block; text-align: center; But again, I can't guarantee that'll work since I don't know how your HTML is set up.

I don't use IPS 4.x, but the code would be pretty similar, so I'll give it a go tomorrow and try to get one up.

I had the same issue a while back and made a support thread for it as well (which can be seen here), but the answer in there isn't very clear if you don't know what you're doing, so I'll tell you the steps. If you have access to PHPMyAdmin for your site, open it up, click on your database, finds the "members" table, and then click the Structures button at the top toolbar. Look for the title table and click on the change button (screenshot). After that, you'll see this. Change "64" to whatever number you want (a suggested amount would be 300). Save the changes and you're done! If you want an even easier way, here's the SQL you can run in the SQL Toolbox page instead of going through and changing it in PHPMyAdmin: ALTER TABLE `members` CHANGE `title` `title` VARCHAR(300); P.S. - You should check out this hook: It lets you edit a member's HTML member title via their account in the ACP, so you don't have to run an SQL query each time. Hope this helps!

Here you go.

Here's a step-by-step guide on how to add a background changer to your IPB 3.x skin. This will work for pretty much any 3.x skin, and can also work for 4.x if you tweak it a little bit. This method used in this tutorial is not the same method I use, but it is the easiest one to implement. In this guide, I'll be setting this up on the default IPB skin. Note: This tutorial utilizes the FontAwesome font icon library and jQuery. I don't have FontAwesome or jQuery installed in my skin, what do I do? To install FontAwesome, go to your ACP > Look & Feel > (Your Skin) > Global Templates > globalTemplate. Find this: {parse template="includeCSS" group="global" params="$css"} And add this above it: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> Alternatively, if you don't want to externally link, you can read the docs on how to install it yourself. If you don't have jQuery installed, it will be mentioned in step 2. Onto the rest of the tutorial. 1) Go to your ACP > Look & Feel > (Your Skin) > CSS > ipb_styles.css. Find this: html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ background-color: #d8dde8; color: #5a5a5a; } body { font: normal 13px helvetica, arial, sans-serif; position: relative; } Replace it with this: body { background-color: #d8dde8; color: #5a5a5a; font: normal 13px helvetica, arial, sans-serif; position: relative; } And save. 2) Go to your ACP > Look & Feel > (Your Skin) > Global Templates > includeJS. At the very bottom of the template, add this: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="{$this->settings['js_base_url']}js/ips.bg_changer.js"></script> Note: If you already have jQuery installed on your skin, you don't need to add the first line. 3) Click the Add New Bit button to add a new skin template. Template Bit Name: bgChanger Add to Group: skin_global Leave the other 2 blank. 4) In your globalTemplate, find this: <ul class='ipsList_inline' id='community_app_menu'> Add this below it: {parse template="bgChanger" group="global" params=""} And save. 5) In your bgChanger template, add this inside of it: <li class="right"><a href="#" id="bg_toggle" data-tooltip="Background Changer"><i class="fa fa-picture-o"></i></a></li> <div id="bg_changer" class="hide"> <h3 class="maintitle">Background Changer <i class="fa fa-fw fa-times-circle clickable"></i></h3> <div class="ipsBox_container ipsPad short"> <ul> <li class="bg_1"></li> <li class="bg_2"></li> <li class="bg_3"></li> <li class="bg_4"></li> <li class="bg_5"></li> <li class="bg_6"></li> </ul> <div id="bg_input"> <input type="text" class="input_text" placeholder="Enter your image URL..." size="30" /> <input type="button" class="input_submit" value="Submit" /> </div> </div> </div> And save. 6) In your CSS, either in your ipb_styles.css or a custom.css file, add this: /**********************/ /* Background Changer */ /**********************/ #bg_changer { position: fixed; width: 50%; top: 15%; left: 50%; transform: translate(-50%); z-index: 9900; } #bg_changer .maintitle i { float: right; margin-top: 2px; } #bg_changer li { background-color: rgba(0, 0, 0, 0.5); background-attachment: initial; display: inline-block; vertical-align: top; width: 80px; height: 80px; margin: 0 5px; border-radius: 4px; cursor: pointer; transition: opacity 0.15s ease-in-out; } #bg_changer li:hover { opacity: 0.75; } .bg_1 { background: transparent url('{style_images_url}/backgrounds/bg_1.png') 0 0 / cover fixed; } .bg_2 { background: transparent url('{style_images_url}/backgrounds/bg_2.png') 0 0 / cover fixed; } .bg_3 { background: transparent url('{style_images_url}/backgrounds/bg_3.png') 0 0 / cover fixed; } .bg_4 { background: transparent url('{style_images_url}/backgrounds/bg_4.png') 0 0 / cover fixed; } .bg_5 { background: transparent url('{style_images_url}/backgrounds/bg_5.png') 0 0 / cover fixed; } .bg_6 { background: transparent url('{style_images_url}/backgrounds/bg_6.png') 0 0 / cover fixed; } .bg_custom { background-size: cover; background-attachment: fixed; } #bg_input { margin-top: 10px; } 7) After that, go into your FTP > public_html > public > style_images > (Your Skin). Create a new folder called "backgrounds" there. After that, grab 6 images you want to use (and make sure they're .png files, or if they're not then make sure to adjust the CSS accordingly). Upload your 6 images to the backgrounds folder and name them as bg_1, bg_2, etc... The folder should look something like this when you're done. 8) Open up your code or text editor and copy/paste this code into there: jQuery.noConflict(); jQuery(document).ready(function($) { var cookies = { 'bg': ipb.Cookie.get("bg_selection"), 'custom': ipb.Cookie.get("custom_bg") }; if (cookies['bg'] && cookies['bg'] !== "") { $("body").addClass(cookies['bg']); } else if (cookies['custom'] && cookies['custom'] !== "") { $("head").append("<style type='text/css'>.bg_custom { background-image: url('" + cookies['custom'] + "'); }</style>"); $("#bg_input input[type='text']").val(cookies['custom']); $("body").addClass("bg_custom"); } else { $("body").addClass("bg_1"); } $("#bg_toggle, #bg_changer .maintitle i").click(function(e) { e.preventDefault(); $("#bg_changer").stop().fadeToggle(); }); $("#bg_changer li").click(function() { var this_bg = $(this).attr("class"), bg_classes = "bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_custom"; $("body").removeClass(bg_classes).addClass(this_bg); ipb.Cookie.set("bg_selection", this_bg, 1); ipb.Cookie.set("custom_bg", "", 0); }); $("#bg_input input[type='button']").click(function() { var custom_url = $("#bg_input input[type='text']").val(), bg_classes = "bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_custom"; $("body").removeClass(bg_classes).addClass("bg_custom"); $("head").find("#custom_bg_css").remove(); $("head").append("<style type='text/css' id='custom_bg_css'>.bg_custom { background-image: url('" + custom_url + "') } </style>"); ipb.Cookie.set("custom_bg", custom_url, 1); ipb.Cookie.set("bg_selection", "", 0); }); }); And save it as ips.bg_changer.js. After you save the file, go to your FTP > public_html > public > js and upload it there. After that, you're done! Here's a screenshot of what it looks like after you're done with all of that, and a screenshot of the background changer itself when opened. And of course, feel free to customize it however you want, I just decided to keep it simple for this tutorial. If anybody doesn't want to use jQuery and instead just JavaScript/Prototype itself (which is already installed in IPB 3.x by default), feel free to let me know and I'll make a quick tutorial for you. Tutorial by Sanctuary of WebFlake.

Pretty late reply, but I'll type up a tutorial on how to do this for IPB 3.x when I get home. If it's not posted by tomorrow, you can send me a PM to remind me in case I've forgotten if you want.

You're gonna need to be more clear if you want an actual answer... At the bare minimum, at least include an arrow pointing to the feature you're talking about.

$50 to be able to see who gave you reputation... lol, no thanks. But oh well, thanks anyway for the information.

So, what about the ability to allow X groups to view who gave X post reputation? I remember this used to be available for Donators a while back when WF was still on 3.x, maybe even a little during 4.x (I might be wrong about that tho). Unless this is already available to a higher tiered donator group (if so, could someone let me know which one?). It's a small thing but it's something I always liked having.

Try this one:

Support no longer needed, ended up figuring it out myself. :P This was the final JS code I used: document.observe( 'dom:loaded', function() { $( 'updateCode' ).observe( 'click', updateCode); }); function updateCode(e) { Event.stop(e); if($('ipsGlobalNotification')) { return false; } new Ajax.Request( ipb.vars['base_url'] + '&app=profilecode&module=ajax&section=update&do=updateCode', { method: 'post', parameters: { 'md5check': ipb.vars['secure_hash'] 'new_title': $('newTitlePost').value }, evalJSON: 'force', onSuccess: function(t) { if( Object.isUndefined( t.responseJSON ) ) { alert( ipb.lang['ajax_failure'] ); } else if ( t.responseJSON['error'] ) { alert( ipb.lang['ajax_failure'] ); } else { ipb.global.showInlineNotification( t.responseJSON['msg'], { 'displayForSeconds': 1.5 } ); $( 'newTitleAjax' ).insert( t.responseJSON['new_title'] + "<br/>" ); } } }); }

Here's a tutorial on how to create some jQuery tabs for your website. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Let's begin with the HTML. <div class="tabs_wrap"> <ul> <li class="active"><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="tabs_content"> <div> Tab content #1. </div> <div> Tab content #2. </div> <div> Tab content #3. </div> </div> </div> I'll be using 3 tabs for this tutorial. Right now, this is what it looks like: Let's go ahead and style that with some CSS. You'll want something along these lines: .tabs_wrap > ul { margin-bottom: 5px; } .tabs_wrap > ul > li { display: inline-block; text-align: center; background-color: #2C93FA; border-radius: 3px; } .tabs_wrap > ul > li.active a { background-color: rgba(0, 0, 0, 0.25); } .tabs_wrap > ul > li a { color: #fff; display: block; padding: 5px 8px; } .tabs_wrap .tabs_content > div:not(:first-child) { display: none; } Here's what it looks like with the CSS applied: A pretty simple layout. If you have some CSS knowledge, you can of course tweak it to your liking. While it looks pretty and whatnot right now, it's not complete - it still doesn't actually work! To make it fully functional, we'll need to apply our jQuery. For the sake of time, I'll be leaving comments inside the code itself instead of explaining it step-by-step. Here's the jQuery we're gonna be using: $(document).ready(function() { // When we click a tab... $(".tabs_wrap > ul > li > a").click(function(e) { // Since the <a> tag has a "#" as the href // We want to prevent it from taking us to the top of the screen e.preventDefault(); // If this tab is the currently active one, don't continue the code if ($(this).parent().hasClass("active")) { return; } // Grab the index of the current tab var tab_index = $(this).parent().index(); // Find the current active tab and remove the "active" class from it $(this).closest(".tabs_wrap").find("li.active").removeClass(); // Add the "active" class to the tab we clicked $(this).parent().addClass("active"); // Inside the .tabs_content div, find the visible <div> and make it fade out $(this).closest(".tabs_wrap").find(".tabs_content > div:visible").stop().fadeOut(250, function() { // As soon as the previously visible <div> is done fading out // Find the <div> we wanted to show and fade it in $(this).closest(".tabs_wrap").find(".tabs_content > div").eq(tab_index).stop().fadeIn(250); }); }); }); And then you're done! Here's what the final product will look like: It looks about the same as the screenshot after applying the CSS, but it is now fully functional and can be clicked around with no problem. You can also use this multiple times on a single page. Enjoy! Code and tutorial by Sanctuary.

Here's a tutorial on how to create a jQuery accordion toggler for your website. For those who don't know what a jQuery accordion does, it allows you show/hide items upon clicking their header/title toggler. If you want an example of what it looks like, go to the bottom of this post. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things. Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Note: This tutorial also utilizes the Font Awesome icon font. If you don't already have it installed, you can read how to install it by visiting this page OR by inserting this inside your <head> tag: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" /> First, let's get started with the HTML markup. What you'll need is something like this: <div class="accord_wrap"> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> <div class="accord_item"> <h1>Title <i class="fa fa-fw fa-angle-down"></i></h1> <div>Here's some content that can be toggled.</div> </div> </div> I'll be using 3 items for this example, but you can use however many you see fit. Since we haven't applied any CSS to this, this is what it currently looks like: The CSS we're gonna apply is very minimal - only 3 lines! Here it is: .accord_wrap .accord_item { margin-bottom: 10px; } .accord_wrap .accord_item > h1 { display: inline-block; font-size: 18px; cursor: pointer; } .accord_wrap .accord_item > div { display: none; } With that applied, here's what it looks like now: Looking good! But of course, it doesn't actually work without the jQuery. To save both your and my time, I'll be leaving comments in the code instead of explaining things step-by-step in this post. If you already understand jQuery then you probably won't need the comments, but I'll be leaving them in there for those who aren't very experienced with it. This is the jQuery code we'll be using: $(document).ready(function() { // Configuration settings /* display_default - Do you want the first item to display by default? only_one - Do you want only one item open at a time? If set to true, the next option won't matter hide_opened - If an item is open, do you want to allow it to be closed again? icons - The 2 Font Awesome icon classes you want to use Note: when changing the first 3 settings, only use true or false */ var config = { display_default: true, only_one: false, hide_opened: true, icons: "fa-angle-down fa-angle-up" } // If the config setting "display_default" is set to true... if (config['display_default']) { // Get the first item in the accordion wrapper var first_item = ".accord_wrap .accord_item:first-child"; // Give it the attribute "data-active" $(first_item).attr("data-active", "true"); // Open it $(first_item + " > div").show(); // And then give it the appropriate icon $(first_item + " > h1 i").toggleClass(config['icons']); } // Once we click a title... $(".accord_item > h1").click(function() { // Here's an array of options to make it easier to target the active accordion item // wrap - Target the active accordion's wrap // div - Target the active accordion's div (where you place your content) // icon - Target the active accordion's icon // We use $(this).closest() so that we can use multiple accordions throught the site! var active = { wrap: $(this).closest(".accord_wrap").find(".accord_item[data-active='true']"), div: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > div"), icon: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > h1 i") }; // If the config settings "only_one" is NOT set to true... if (!config['only_one']) { // Get the active div content and remove the "data-active" attribute active['wrap'].removeAttr("data-active"); // Toggle the icon $(this).find("i").toggleClass(config['icons']); // And then slideToggle the content, while also NOT continuing with the rest of the code return $(this).next().stop().slideToggle(); } if (!$(this).parent().attr("data-active")) { // Close it, change the icon, and then remove the "active-item" attribute active['div'].stop().slideToggle(); active['icon'].toggleClass(config['icons']); active['wrap'].removeAttr("data-active"); // Target this item and give it the "data-active" attribute $(this).parent().attr("data-active", "true"); // Target the div (where you place your content) and open it $(this).next().stop().slideToggle(); // Target the icon and then change it accordingly $(this).find("i").toggleClass(config['icons']); } else { // If the config setting "hide_opened" is NOT set to true, don't continue with the code if (!config['hide_opened']) { return; } // Close the active icon, change the icon, and remove the "data-active" attribute active['div'].stop().slideToggle(); active['icon'].toggleClass(config['icons']); active['wrap'].removeAttr("data-active"); } }); }); After adding that, you're done! This is the final result: If you have the "only_one" setting set to false, then you can open multiple items at once! Not counting all the comments and blank lines, you now have a jQuery accordion with only 40 lines of jQuery! Code and tutorial by Sanctuary.