We Keep Coding

My CSS class not working when appending from JS? (fcc wikipedia project)

This is the Wikipedia search engine API Project i'v been working on --> https://codepen.io/Mike-was-here123/full/zPxQob/
i append the search results to the ul (id="result"). I use this code:
$("#result").append("</li><a href='"+data[3][i]+"'<div class='presentDiv'><h5 class='present'>"+data[1][i]+"</h5><h5 class='desc'>"+data[2][i]+"</h5></div></a></li>")
Now if you go to search something, it pushes the description, link, and title but for some reason none of my class work. How can i get them to work?

this may work small change i.e, closing anchor tag before div opens
$("#result").append("</li><a href='"+data[3][i]+"'><div class='presentDiv'><h5 class='present'>"+data[1][i]+"</h5><h5 class='desc'>"+data[2][i]+"</h5></div></a></li>")

Accordion slider, not displaying content properly

I have this multi-tiered accordion slider for listing schedules. The problem I am having is once you navigate to the third tier, the entire list disappears and has some weird space at the top. If you follow this link -- Pool League Demo
You can see what I mean once you navigate to the schedules tab. Once there, if you click monday 9 ball > Week 1 , you will see exactly what I mean. Any help is very much appreciated :)
Also, on a side note, I am using scrollIt.js and for some reason am having problems with the active class. When applied, it doesn't do what it is supposed to, and this happens multiple times throughout the page, even in the schedules section which doesn't use scrollit.js. If anyone knows how to get the active class to work, I would really appreciate the help on that as well.
Thanks in advance!!

For your second answer, please try adding the activeClass: 'active' parameter to the $.scrollIt() function call.
e.g. :
$.scrollIt({
activeClass:'active'
});
and make sure the class name you mention has some CSS attached to it.
e.g. :
a.active {
background: #000;
color: fff;
}

jQuery Conflict with Collapsible List

I'm currently using a small jQuery script, included infra, to make lists with the class collapsible-list collapsible/expandable. By default, the script collapses the list (and a bit of CSS, also included infra, makes this easily noticeable for visitors) and then expands it when a visitor clicks on expandable elements.
Here are the scripts:
The jQuery
jQuery(function($) {
function prepareList() {
$('.collapsible-list').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('collapsible-list-expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsible-list-collapsed')
.children('ul').hide();
};
$(document).ready( function() {
prepareList()
});
});
The CSS
/* Collapsible Lists */
.collapsible-list, .collapsible-list ul, .collapsible-list li {
list-style: none;
}
.collapsible-list .collapsible-list-collapsed:before {
content: "+ ";
font-weight: bold;
color: #00AA00;
}
.collapsible-list .collapsible-list-expanded:before {
content: "- ";
font-weight: bold;
color: #AA0000;
}
The CSS is included for the sake of completeness, it functions exactly as expected. The issue lies with the jQuery (and likely some other script on the page, which I cannot seem to isolate).
The script does collapse all but the top-level sections of any list given the collapsible-list class, but that's where the proper functionality ends. Now, the script behaves as expected in my test environment (and also in JSFiddle); however, once the script is implemented in my site, the lists collapse, expand one click, but, instead of staying expanded after being clicked (as they should), they immediately collapse again. This, quite obviously, renders the script useless once implemented, as any list on which it is invoked by the collapsible-list class is made unusable for visitors.
Here is a link to a page where it is currently implemented: http://wpmudev.docs.omnifora.com/docs/plugins/wpmu-dev-dashboard/. Now, I'm sure there is a script conflict somewhere, but I cannot seem to figure out what script is conflicting.
Additional Information
This site uses Bootstrap, which, I suspect, might be the source of the conflict.
Updates
I've narrowed down the potential conflicts, and it seems that Bootstrap may not be the culprit. Here is a JSFiddle with the list behaving as expected within two different Bootstrap panel setups (nested within panel-body and nested within panel): enter link description here.
I've now managed to get the list working except as to formatting. The jQuery conflict seems to have been caused by a slight error in the way one script was calling another, which leads to the collapsible-list.js file being loaded twice. Here's a working JSFiddle: enter link description here

It might work to add a .toggleClass('collapsible-list-collapsed'); in your click function.

After fiddling with things for a few hours, I was able to resolve the conflicts:
One of the script references was improperly formatted, and that was resulting in two calls to collapsible-list.js, which was causing the unexpected immediately-contract-upon-expansion behaviour.
The original script used just expanded and collapsed as classes, which was interacting with another set of rules and causing unexpected behaviour; the modified script uses more specific classes, which avoid such conflicts.
and then amend the CSS:
Someone had thought it wise to put padding: 0; onto ul and li elements in the theme's primary CSS file; this was, obviously, easily overridden with a more specific rule for .collapsible-list.
The result is that the page is now functioning as expected: http://wpmudev.docs.omnifora.com/docs/plugins/wpmu-dev-dashboard/.

Jquery toggle mobile menu (remove href javascript)

I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.

In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/

Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?

javascript drop-down menu: how to link to different sites?

I'm a college student trying to create a drop-down menu for my professor. Since I don't have any programming background, I found a program called "SoThink DHTML" that generated a code for me, but there are some errors within that I don't know how to fix.
The menu, overall, should have tabs to "Home," "Research" (3 subtabs: "Research Projects," "Systems and Approaches," and "Images and Movies"), "Publications, "Lab Members," "Links," and "Contact Us." The automatically generated code, however, doesn't provide links to some of these titles, and I was wondering how can I insert the links manually?
How can I insert the paths so that they do not refer to specific files, but are more flexible when I move the folder containing the website?
I hope that this makes some sense..
Thank you so much for your help in advance!!
stm_bm(["menu1c53",960,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","100%",0,0,1,2,"default","hand","",1,25],this);
stm_bp("p0",[0,4,0,0,0,0,0,15,100,"",-2,"",-2,50,0,0,"#999999","transparent","line1.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#E6EFF9",1,"#E6EFF9",1,"","line2.gif",1,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","bold 9pt Verdana","bold 9pt Verdana",0,0,"","line2.gif","","line2.gif",2,2,42],100,0);
stm_aix("p0i1","p0i0",[0,"Research","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow1.gif","arrow2.gif",15,9],100,0);
stm_bp("p1",[1,4,0,-3,6,0,5,0,100,"progid:DXImageTransform.Microsoft.RandomDissolve(,enabled=0,Duration=0.30)",12,"",-2,80,0,0,"#999999","#beeb94","",3,0,0,"#CCCCCC","",-1,-1,0,"transparent","",3,"",-1,-1,0,"transparent","",3,"line3.gif",-1,-1,0,"transparent","line3.gif",3,"",-1,-1,0,"transparent","",3,"","","","",1,1,1,1,1,1,1,1]);
stm_ai("p1i0",[0,"Research Projects","","",-1,-1,0,"./Research_Projects.html","_self","","","","",5,1,0,"","",0,0,0,0,1,"#E6EFF9",1,"#edf9e1",0,"","",3,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","7pt Verdana","7pt Verdana",0,0,"","","","",0,0,0],0,20);
stm_aix("p1i1","p1i0",[0,"Systems and Approaches","","",-1,-1,0,"./Systems_and_Approaches.html"],0,20);
stm_aix("p1i2","p1i0",[0,"Images and Movies","","",-1,-1,0,"./Images_and_Movies.html"],0,20);
stm_mc("p1",[7,"#1E1E1E",1,2,"",3]);
stm_ep();
stm_aix("p0i2","p0i0",[0,"Publications","","",-1,-1,0,"#"],100,0);
stm_aix("p0i3","p0i2",[0,"Lab Members"],100,0);
stm_aix("p0i4","p0i2",[0,"Links"],100,0);
stm_aix("p0i5","p0i2",[0,"Contact Us"],100,0);
stm_ep();
stm_em();

It looks like you are using relative urls, which find a file based on the current location. Therefore they mean different things when the file containing the urls is in different places.
../../public/img/logo.gif
absolute urls start from the root of the website, which means you can move the file containing them anywhere and it will still refer to the same location.
http://www.somedomain.com/en/public/img/logo.gif
more on the difference (warning, get technical).