We Keep Coding

Changing style of multiple objects using javascript

I am creating a website using WordPress, so the content is created dynamically.
The elements ID is also dynamically generated
Each container can have these elements (a container can have multiple - but not the same):
t_1
f_1
f_2
f_3
I also add the container count at the end of the elements ID, so each element will have a unique ID
Let's say the PHP will generate a HTML like this:
<div id="container_1">
<div id=f_1_1>
//content
</div>
<div id=f_2_1>
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2>
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3>
//content
</div>
</div>
I would like to animate the position of these elements as the user scrolls, I added javascript to do it:
var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
scroll = window.pageYOffset;
requestAnimationFrame(scroll)
}, false)
function scroll() {
document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}
So here is the problem, I don't know which elements should I get by ID.
I thought about making a loop where I check each container for the elements inside, however I think it would use too much resources and would be laggy as the function runs each time the user scrolls.
An other solution I tried is to add the javascript dynamically to each container so I know exactly which elements I need to animate. It worked only for the first container as when I added the next container there were multiple function using the same name and only the last function has been executed
<div id="container_1">
<div id=f_1_1>
//content
</div>
<script type="text/javascript">
function scroll() {
document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
}
</script>
</div>

You can use - WOW.js for animation when element is comes inside viewport.
<div id="container_1">
<div id=f_1_1 class="wow myCustomAnimation">
//content
</div>
<div id=f_2_1 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3 class="wow myCustomAnimation">
//content
</div>
</div>
Where you have to write myCustomAnimation as per your requirment.

How to show a specific section from a link that is hidden

I have multiple links that go to the same page, however I want different sections of that page to show (preferably at the top of the page). The issue is, those sections are hidden on page load and so is the container they are in. I solved how to get the container to show, but it shows all of the different sections when I only want the one I clicked on, from the link, to show. ie:
I have these links:
Service 1
Service 2
Service 3
Then on the serviceCheck1 page I have this HTML:
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
<div class="service-item-box" id="service2">
<div class="service-item-title">Service 2</div>
</div>
<div class="service-item-box" id="service3">
<div class="service-item-title">Service 3</div>
</div>
<div class="service-item-box" id="service4">
<div class="service-item-title">Service 4</div>
</div>
<div class="service-item-box" id="service5">
<div class="service-item-title">Service 5</div>
</div>
<div class="service-item-box" id="service6">
<div class="service-item-title">Service 6</div>
</div>
</div>
</div>
If I would click on the link that says, Service 2, I would want the service-display-box to show and then the #service2 div to show, then all of its siblings to not show.
Here is my javascript:
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
//$('#' + sectionName ).show();
$('#service' + sectionName).show().siblings().hide();
})
/*var index = location.hash.indexOf('#service');
if(index > -1) {
var serviceId = parseInt(location.hash.substring(index));
if(serviceId) {
$('#service-display-box').show();
$('#service' + serviceId).show().siblings().hide();
}
}*/

It appears as though your selector for the section is not formed correctly. Essentially this happens:
You click on Service 1
The serviceCheck1 page loads.
This line runs: var sectionName = window.location.hash.slice(1);
sectionName now contains "service1"
This line runs: $('#service' + sectionName).show().siblings().hide();
This evaluates to $('#serviceservice1').show().siblings().hide();
The browser can't find an element with the id serviceservice1
Nothing happens :)
Instead, since window.location.hash contains #service1 already, just run the following:
$(window.location.hash).show().siblings().hide();
Which will find the appropriate element, show it, and hide its siblings.

You could try using CSS to control the visibility, and simply toggle a class with your JS.
JS:
$('#service-display-box').addClass('visible');// Make the wrapper visible
$('#service-item-box').removeClass('visible');// Double-check all the other boxes are still hidden
$('#service' + sectionName).addClass('visible');// Make the target box visible
CSS:
#service-display-box,
#service-item-box{
display:none;
}
#service-item-box.visible,
#service-item-box.visible{
display:block;
}

When div is clicked - slidetoggle other div

I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/

undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!

$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});

class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?

You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();

I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>

Why not use slideToggle() instead of IF statements....

Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

How to toggle (jQuery) with an anchor

I have a small problem with jQuery.
The situation:
I have a piece of jQuery code, where I toggle results.
JS Code:
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return true; //Prevent the browser jump to the link anchor
});
Now I want to open - toggle an item on anchor position from the URL like (http://x.com/page.php#toggleItem2)
Question:
How read toggleItem2 from URL and open exactly this section?
Additional:
HTML Code:
<div class="container">
<h2 class="acc_trigger">Item1</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
<h2 class="acc_trigger">Item2</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 2
</div>
</div>
<h2 class="acc_trigger">Item3</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 3
</div>
</div>
</div>
I hope the problem is clearly defined.

You should give your divs IDs according to the anchors, e.g.
<h2 class="acc_trigger">Item1</h2>
<div id="toggle1" class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
You can get the document fragment from the location object:
document.location.hash
Then it is simply (assuming the other containers are all hidden):
$(document.location.hash).slideDown().prev().addClass('active');

Try jquery toggle itself
http://api.jquery.com/toggle/

This is held within the window.location.hash variable.

You can do something like this:
http://jsfiddle.net/b6Znw/
Javascript:
$().ready(function(){
$('.acc_trigger a').click(function(){
$(this).closest('.acc_trigger').next('.acc_container').toggle()
return false;
})
})