We Keep Coding

How can I remove class from Slick Slider?

I've been trying to use slick slider and I am running into a small issue. I have two sections where I want to use the slider. First one is just the "fade" effect with one picture and the second one is testimonial slider. Now the issue is if I want to have a margin between my testimonials and I use:
.slick-slide {
margin: 0px 10px;
}
See picture of margin between the testimonials
HTML Markup -
<div class="slider">
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>This is the only Norskkurs to take in Stavanger if value for
money and truly progressing with
the Norwegian are important factors for you.
</h3>
<strong>Jessica Morris</strong>
<p>A1/A2 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>Very hands on and animated. Relaxed atmosphere which is
perfect for feeling comfortable in a new language setting.
</h3>
<strong>Helen Brian</strong>
<p>A2 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>This course is a wonderful journey with lots of fun and
activities towards the goal. It's a well
designed course for learning.
</h3>
<strong>Chidabaram Harikumar</strong>
<p>A1/A2/B1 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>It is first language course which I have lasted more than one month :) . It means alot to me. They
teach with both their heart and brain.
</h3>
<strong>Amir Ghaderian</strong>
<p>A2/B1 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>One of the best thing which I have done in my life is to join Norskkurs in LNS.It's a great place to
learn the language with good people.
</h3>
<strong>Dayanand Mohanasundram</strong>
<p>A1/A2 Student</p>
</div>
</div>
</div>
Now with my next "fade" slide I don't want the margin but it will still add the same .slick-slide properties to all the slides I use.
Is there anyway I can only apply this to one slide or remove this class/property from other slides?
In short, I only need margin between testimonials slide and not the other one. How can I get around this?

you can add a class testimonials to the testimonials slider and add margin to this class.
.testimonial-slide {
margin: 0px 10px;
}

I'd suggest updating your HTML structure if it's not updated. You can use BEM https://en.bem.info/methodology/ in order to not fall in such traps.
If you have 4 sliders you might have the following HTML:
<div class="slider">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-testimonials">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-faq">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-people">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
So there won't be a problem to style each slider__slide per slider.
.slider-testimonials .slider__slide { margin: 0 10px; }
Then, the above margin won't be applied to the other sliders.
If you need to share a style among all slider__slide elements.
You can do the following:
.slider__slide { box-shadow: 0 0 0 black; } for example.
I hope that helps.

Button on HTML page doesn't work

Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work.
I try to solve it for hour, but I don't understand the problem. You can find the site here.
And you can find the JSFiddle here.
Here there are the part html:
<div class="section" id="section5">
<div class="slide" id="slide1">
<div class="intro">
<h1>#your Led Solution 1 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
<img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>#your Led Solution 2 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit & LED indicator lamps with integrated pulse</p>
<img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>

.fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.

Angular show and hide multiple elements

I am trying to create a simple accordion menu - display: none display: block.
I'm having difficulty showing and hiding individual elements one by one at the moment when i click one accordion menu ALL accordion hidden menus are displaying. Does any know how i can solve this issue. I am aware I can use bootstrap how i want to custom build this...
Below is snippets of my code.
Angular
$scope.frqToggle = function () {
$scope.hiddenToggle = !$scope.hiddenToggle;
}
HTML
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>

You need a seperate variable for each element you want to show/hide:
$scope.hiddenToggleOne = false;
$scope.hiddenToggleTwo = false;
$scope.hiddenToggleThree = false;
//one fore each ...
$scope.frqToggle = function (toggleElem) {
toggleElem = !toggleElem;
};
You markup:
<div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>

Create an object to maintain which accordion is open. Lets say you have an accordion with 3 menu items that can open. Have an object like this which maintains which menu is open and which is closed.
$scope.accordion_visibility = {
menu_1: true,
menu_2: false,
menu_3: false
}
Now create a method to toggle the visibility of a menu.
$scope.toggleMenuVisibility = function(menu_name){
$scope.accordion_visibility[menu_name] = !$scope.accordion_visibility[menu_name];
}
Now in the view, use ng-show="accordion.menu_1", ng-show="accordion.menu_2" etc on each menu item. Also, add ng-click listener on each like ng-click="toggleMenuVisibility('menu_1')", ng-click="toggleMenuVisibility('menu_2')" etc on each menu. It should work.

button 1
<a (click)="iconClick(1)">
<p style="color:gray;">
nr 1 Create Documents from Scratch
</p>
</a>
button 2
<a (click)="iconClick(2)">
<p style="color:gray;">
nr 2 Create Documents from Scratch
</p>
</a>
on text 1
<div class="col-12" *ngIf="icon == 1"></div>
on text 2
<div class="col-12" *ngIf="icon == 2"></div>
on component
icon = null;
iconClick(number) {
this.icon = number;
}

Prevent animation on every row

I'm working on this code example of collapsible text.
jsfiddle Link
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(document)
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
There is a issue with the code when i expand the first row. When I click on one row arrow animation is activated also on all rows. How I can prevent this?

Because you use this:
$('.arrow').toggleClass('down');
This will toggle the class for all elements with arrow class
You want to limit it to the question being clicked on
$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');
Updated Fiddle

Why does my website load double content? My first interactive Javascript attempt

Good day good people, I very much appreciate the depths of knowledge on this site.
Long story:
I have made a couple of very basic websites with html and css but this is my first attempt at a more interactive website with Javascript. The URL is www.audiophilesengineering.com and it has a few glitches that I cannot pinpoint in my code. Specifically, the entire "Contact" page loads the content twice. This seems like the most consistent error so I would like to tackle that first. I am currently a young broke entrepreneur, so I am forced to do most everything myself for my businesses, for now. At the same time I am dissatisfied with my previous boring website and want to make something much more interactive, but some serious glitches have developed.
tldr (short story);
Why does the content of http://audiophilesengineering.com/#!Contact.html display twice?
contact page html code:
<div class="genericSection section-CONTACT">
<!--add here url for this section background image-->
<img class="sectionBackgroundImage" src="pages/backgrounds/background_contact.jpg" />
<!--/section background image-->
<!--add here page number-->
<p class="pageNum textColor01">04/<span class="textColor03">07</span></p>
<!--/add here page number-->
<!--skeleton container-->
<div class="container">
<!--Website logo-->
<div class="row">
<div class="sixteen columns">
<img class="brand" src="images/logo.png" alt="logo" />
</div>
</div>
<!--/Website logo-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">1</div>
<h2 class="textColor01">Contact Us<span class="textColor02"> // Phone or Email</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<div class="addressContainer">
<p><a class="phoneBig textColor01" href="tel:+8134801321">813-480-1321</a></p>
<p>audiophilesengineering#gmail.com</p>
<p class="defaultText textColor01">Audiophiles Engineering<br />Tampa, Florida 33624<br />United States</p>
</div>
</div>
</div>
<!--/Section title H2-->
<!--vertical spacer-->
<div class="verticalSpacerMedium"></div>
<!--/vertical spacer-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">2</div>
<h2 class="textColor01">Visit Us<span class="textColor02"> // By Appointment Only</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<!--full width map-->
<div class="mapContainer">
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=28.04,-82.51&sll=28.040078,-82.510190&hl=en&ie=UTF8&t=p&ll=28.033198,-82.507324&spn=1.939406,8.789063&z=6&output=embed"></iframe>
</div>
</div>
</div>
<!--/Section title H2-->
</div>
<!--/skeleton container-->
</div>