We Keep Coding

Multiple buttons function to expand and hide div section with javascript

Hope everyone is having fun on this fun (or frustrating 😂 like me) coding day. So, I came across a problem and was hoping someone could help guide me to the right solution. I want to set it so that when I click on the “read more” button, it adds the “active” class and would expand the paragraphs.
I was able to do a loop function for multiple buttons on the page, but when I click on one, it affects all the buttons. I know this is a looping problem but I have not figured out a way to solve it.
What I’m trying to do is basically only have the button I click on add the class, without it working on all the buttons on the webpage. I intend to add more buttons to the page, so if anyone has a better solution or knows of a looping method (cause I’m pretty sure the looping I’m using is the wrong way), please help.
Please see the video for what I mean when I click on one button, both buttons get affected by it.

Need JS help- collapsing a toggled down element when another is selected

Need help with the "our team" section halfway down this page: http://dev.doubleaevents.com/
When you click an image it opens to reveal more information. I'd like to be able to click another image and have the previously opened image collapse, so that a user can't open more than one image at a time.
Would also like to know if making them slide out to the right (instead of down) would be a simple fix?
I'm a js novice so any explanations are appreciated. Here's the js file for quick reference: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js

Try adding this:
jQuery('.portelement').each(function(){
if(jQuery(this).hasClass('large')){
jQuery(this).removeClass('large');
jQuery(this).animate({
height:240
},300);
}
});
before:
jQuery(this).parents('.portelement').addClass('large');
In your javascript code.
When you click an item you basically want to search for elements that are already open. Then from there remove the 'large' class name and close that element. From there you continue on to opening the selected element. Thats what this code does.
As far as your other question, it shouldn't be too difficult, just mess around with the animate method and css. But maybe look into the isotope documentation. There may be an option for that.

CSS Drop down menu on mobile. how to get around :hover

I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.

I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.

We had this problem and changed the hover to clicks.

Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.

You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.

Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.

Show and Hide overlay using jquery

I am using JQuery for showing and hiding my overlay and it works just great. Now I also wanted to add some animations, hence I went ahead and check out the jq docs and got some nifty animations which can be applied to the show and hide functions directly.
What though I am looking for is on clicking, the overlay should appear to come up from the from the div which I clicked on, and on closing the overlay, it should hide by minimizing into the div which was used to open it.
Thanks
Fiddle URL if you can show it here

Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/

Javascript slide down menu

I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?

It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});

To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!

You can check out this links -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
You can even google out for more. There are many of them available.

You can use the jQuery .slideDown() and .slideUp methods.
http://api.jquery.com/slideDown/
However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.
Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.

Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)