We Keep Coding

Image slider in jQuery with actual slides as next/prev triggers

I'm a designer, have only a slight idea about jQuery. But I love learning :) So I decided to do the below thing myself, and I can't quite get it to work.
My idea is to have a slider with actual slides as next/prev buttons. So I can go to next slide by clicking the actual next slide - the same for previous slide. I guess the picture below shows what I mean.
Desired effect
I've tried to do it this way:
assign a class .main to the main image
assign a class .prev to the partially hidden image on the left
assign a class .next to the partially hidden image on the right
And when I click .next, I change classes .main > .prev, .next > .main, .next +1 > .next.
Now I can do it one step up and it works, the classes change and it works fine. But then when I click the now-.next class, jQuery seems to not recognize it's .next now and responds to it as if it were still the .main class. The updated classes don't respond (the now- .main class still works as .next, as if jQuery was not reading the change).
Here's the HTML:
<div class="view">
<ul>
<li class="left" data-id="1"></li>
<li class="main" data-id="2"></li>
<li class="right" data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
</ul>
</div>
And the script:
$(".next").click(function(){
$(this).prev().removeClass("main").addClass("prev");
$(this).removeClass("next").addClass("main");
$(this).next().addClass("next");
$(".view ul li:first").animate({marginLeft: '-=57%'});
$(".view ul li.main").animate({marginLeft: '-=15%'});
});
I guess it's toddler talk for you, but perhaps you could help me get it to work. How would you come about the matter? Any ideas?
Big thanks up front!
Cheers!

It is not really toddler talk because there are a few pitfalls you need to be aware of.
First of all, the click handler will not work for the new .next this way.
You need to use
$('body').on('click', 'li.next', function() {
instead to make it work for dynamic content.
Another problem is that you forgot to remove the .prev class
$(".prev").removeClass("prev");
Another small mistake is: $(".view ul li:first").animate({marginLeft: '-=57%'}); which always takes the first element, but after the first slide it should take the .prev instead. (so change it to li.prev).
I guess btw that you use class="prev" instead of left (typo in question).
See the full code here:
http://jsfiddle.net/a8Lf9r68/3/
And as #Mō Iđɍɨɇƶ says, you need some additional code to handle the last and first element clicks. But that depends on what you want, and I see it as outside the scope of the question.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Make Menu have a slideToggle Effect and push below elements down

I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...

You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.

You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});

Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.

css and javascript onmouseover type effect

When I visit some sites and take mouse pointer over some menu item, another sub menu items comes up in another panel adjacent to main menu item. Thus giving an effect like onmouseover. But when I see the source code (like View source option in IE) there is no onmouseover / onmouseout event defined in the menu item list element.
For example, in the website http://www.seoconsultants.com/ - take mouse pointer over SEO Search on the left panel or in the website http://www.znetindia.com take mouse pointer Email option on top menubar
How to get such effect using css and javascript.

Without JS, just with CSS. Take a look at the source code: http://www.seoconsultants.com/css/seo.css
/* Begin CSS Popout Menus at Left */
#menuleft ul li{position:relative;}
#menuleft li ul{position:absolute;left:180px;top:0;display:none;padding:0;}
div#menuleft ul li:hover ul{display:block;}
Basically you say: "When the mouse is hovering over a parent list element, the child list should be visible."

This is done through the use of the :hover CSS attribute attached to the CSS rule of the parent node.
Consider the following HTML code:
<div class="parent">
<span class="label">Always on!</span>
<span class="hiddenLabel">Show on Mouse</span>
</div>
You achieve the effect you mention with the following css code:
.parent .hiddenLabel {
visibility: hidden;
}
.parent:hover .hiddenLabel {
visibility: visible;
}
This basically tells the browser that when a mouse hover event occurs on the "parent" node, the nodes with the CSS class of "hiddenLabel" will appear to the user and disappear when the mouse moves off the node.
This is the best practice for achieving this effect because of the load time and processing required for the javascript to start running on the page is longer than CSS being loaded.
Here is a great write-up on pseudo selectors and what each of them do: http://css-tricks.com/pseudo-class-selectors/

Take a look at jQuery and some plugins. See this site for a list of jQuery dropdown plugins. http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/