Develop Reference

slideup once click slidedown div

I have done slideup and slidedown div using jquery. Here i have three boxes.Once we click the head, the content will open. then click another head, that content will open and old content close. But i cont close same content. All time any one of the content is open. I need once we click head that content need to close.
$(document).ready(function() {
$("p").click(function() {
$this = $(this);
var parent = $this.closest('.acc');
$("p").removeClass('open');
$this.addClass('open');
$('.acc-body').slideUp();
parent.find('.acc-body').slideDown();
});
});
body {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.acc {
padding: 0px;
margin: 0;
}
.acc-head {
padding: 15px;
margin: 0;
background: #ccc;
}
.acc-head.open {
background: #000;
color: #fff;
}
.acc-body {
border: 1px solid #ccc;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
</div>

To fix this use slideToggle() on .acc-body, and use not() to exclude it from the slideUp(). The same pattern works for adding and removing the open class on the p elements.
$(document).ready(function() {
$("p").click(function() {
var $this = $(this);
var $target = $this.next();
$("p").not($this).removeClass('open');
$this.toggleClass('open');
$('.acc-body').not($target).slideUp();
$target.slideToggle();
});
});
body {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.acc {
padding: 0px;
margin: 0;
}
.acc-head {
padding: 15px;
margin: 0;
background: #ccc;
}
.acc-head.open {
background: #000;
color: #fff;
}
.acc-body {
border: 1px solid #ccc;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px;">
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
</div>

Just look first for the head owning the class open.
Fixed it like this
$(document).ready(function(){
$("p").click(function(){
$this = $(this);
if($this.hasClass('open')){
$this.removeClass('open');
$this.siblings('.acc-body').slideUp();
}else{
var parent = $this.closest('.acc');
$("p").removeClass('open');
$this.addClass('open');
$('.acc-body').slideUp();
parent.find('.acc-body').slideDown();
}
});
});
Hope it helps! :)

Here is the Solution for You!!!
Using Jquery hasClass() function we can solve this problem. First we need to check clicked element has class or not. if has 'open' class then do the slideup function, else do the slideDown function.and remove all open class for other 'p'.
we solve this function using slideToggle() also.
$(document).ready(function(){
$("p").click(function(){
$this = $(this);
if($this.hasClass('open')){
$this.removeClass('open');
$('.acc-body').slideUp();
}else{
var parent = $this.closest('.acc');
$('p').removeClass('open');
$this.addClass('open')
$('.acc-body').slideUp();
parent.find('.acc-body').slideDown();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
*, *:before, *:after{
box-sizing: border-box;
}
.acc{
padding: 0px;
margin: 0;
}
.acc-head{
padding: 15px;
margin: 0;
background: #ccc;
}
.acc-head.open{
background: #000;
color: #fff;
}
.acc-body{
border: 1px solid #ccc;
display: none;
}
</style>
<div style="max-width: 500px;">
<div class="acc">
<p class="acc-head">
head1
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head2
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>
<div class="acc">
<p class="acc-head">
head3
</p>
<div class="acc-body">
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
</div>
</div>

Use Simple Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<div class="accordion">Section 1</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="accordion">Section 2</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="accordion">Section 3</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Expand all at once

I am trying to have an Expand All button on my website. I have two levels of expanding and collapsing links and would like to have an option to Expand All when someone wants to see everything without clicking. I think I know what I need to do - loop through all accordions and set them to display. Could you give me some tips.
This is the code. Please help.
function ExpandAll() {
var acc = document.getElementsByClassName("accordionMain");
var i;
for (i = 0; i < acc.length; i++) {
var panel = this.Children
panel.style.display = "block";
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
<!DOCTYPE html>
<head>
</head>
<body>
<h2>Accordion</h2>
<button onclick="ExpandAll();">Expand All</button>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

You can ask document to give you all .panel elements to show as below
function ExpandAll() {
var pannels = document.querySelectorAll('.panel');
for (panel of pannels)
panel.style.display = "block";
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
<h2>Accordion</h2>
<button onclick="ExpandAll();">Expand All</button>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

ExpandAll() should be expandAll() (May not matter but it bothered me)
Make sure to change it for the onclick for your button as well.
<button onclick="expandAll();">Expand All</button>
Then change your code to not look for acordionMain but for the panel. The getElementsByClassName(X) returns and array. So you can just iterate through that array and set the style to display: "block" via JS. The code is below.
<script>
function expandAll ()
{
var elements = document.getElementsByClassName("panel");
for (var i = 0; i < elements.length; i++) {
var panel = elements[i];
panel.style["display"] = "block";
}
}
</script>
EDIT:
Here is a Fiddle: https://jsfiddle.net/CraftingGamerTom/f6y96c2e/

Fill HTML elements with JSON

I am trying to figure out the best way to JSONify a set of repeated HTML that I have with me.
I have the following piece of code that gets repeated for "n" number of times.
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3>This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span>on Sep 23, 2016</span>
<span class="comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
I want to create a template, something like this (suggestions welcome)
<article class="style2">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="">
<div class="article-thumb">
<img src="" class="img-responsive" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3></h3>
<div class="meta">
<span>by </span>
<span></span>
<span class="comment"><i class="fa fa-comment-o"></i> </span>
</div>
<p></p>
Read More
</div>
</div>
</div>
</article>
and then dynamically generate this element based on a JSON file. The contents of the JSON will be similar to the following:
url = http://www.google.com
image = https://place-hold.it/370x231/5
title = This is my first article
author = Benjamin K.
date = Sep 23, 2016
abstract = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
comments = 1
CodePen https://codepen.io/iwant2learn/pen/PEmBMN
Thanks in advance for any help!

If your "template" really is fixed (no variants) and quite simple as what you posted... The .clone() method may be an interest for you.
Yes... As mentionned in comments, there is templating libs that exist. You should also look. But a simple way to do it by yourself, using just one jQuery method, is to give each of your template "field" a class.
Then populate a clone of your template with the jsons you have and append it to the document.
Notice the ".template" class I added in your CSS to hide the template.
var myJSONarray = [
{
url : "http://www.google.com",
image : "https://place-hold.it/370x231/5",
title : "This is my first article",
author : "Benjamin K.",
date : "Sep 23, 2016",
abstract : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments : 1
},{
url : "https://learn.jquery.com/",
image : "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title : "This is my first script!!!",
author : "J. Q. Harry",
date : "Dec 31, 2017",
abstract : "You can do what you want, if you are a bit creative, my friend.",
comments : 172
}
];
$(document).ready(function(){
for(i=0;i<myJSONarray.length;i++){
var clone = $(".template").clone();
clone.find(".template-url").attr("href",myJSONarray[i].url);
clone.find(".template-title").find("a").html(myJSONarray[i].title);
clone.find(".template-image").attr("src",myJSONarray[i].image);
clone.find(".template-author").html(myJSONarray[i].author);
clone.find(".template-date").html(myJSONarray[i].date);
clone.find(".template-abstract").html(myJSONarray[i].abstract);
clone.find(".template-comment").html('<i class="fa fa-comment-o"></i> '+myJSONarray[i].comments);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
.template{
display:none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {
}
article .article-thumb:hover img {
}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover, a {
color: #333;
}
a.link, a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt=""/>
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title">This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
CodePen (Updated with an infinite scroll)

var myJSONArray = [{
url: "http://www.google.com",
image: "https://place-hold.it/370x231/5",
title: "This is my first article",
author: "Benjamin K.",
date: "Sep 23, 2016",
abstract: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
comments: 1
}, {
url: "https://learn.jquery.com/",
image: "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
title: "This is my first script!!!",
author: "J. Q. Harry",
date: "Dec 31, 2017",
abstract: "You can do what you want, if you are a bit creative, my friend.",
comments: 172
}];
$(document).ready(function() {
for (const val of myJSONArray) {
var clone = $(".template").clone();
clone.find(".template-url").attr("href", val.url);
clone.find(".template-title").find("a").html(val.title);
clone.find(".template-image").attr("src", val.image);
clone.find(".template-author").html(val.author);
clone.find(".template-date").html(val.date);
clone.find(".template-abstract").html(val.abstract);
clone.find(".template-comment").html(`<i class="fa fa-comment-o"></i> ${val.comments}`);
clone.removeClass("template");
$(".template-spot").append(clone);
}
});
.template {
display: none;
}
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.inner-content {
padding: 50px 0 57px;
}
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
.section-head {
margin-bottom: 22px;
}
.section-head h2 {
font-weight: 300;
}
article.style2 {
padding-bottom: 30px;
margin-bottom: 30px;
}
article {
border-bottom: 1px solid #eeeeee;
padding-bottom: 15px;
margin-bottom: 30px;
}
article .article-thumb {
position: relative;
overflow: hidden;
background: #fff;
}
article:hover .article-thumb {
background: #000;
}
article .article-thumb img {
width: 100%;
}
article .article-thumb img {}
article .article-thumb:hover img {}
article .post-excerpt {
padding: 9px 0;
}
article .meta {
margin-top: 2px;
}
.meta span {
font-size: 14px;
color: #787878;
}
a.link:hover,
a {
color: #333;
}
a.link,
a:hover {
color: #33ccff;
}
.small-title {
font-size: 10px;
letter-spacing: 0.10em;
font-weight: bold;
line-height: 18px;
color: #333333;
margin-bottom: 5px;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner-content">
<div class="container">
<div class="section-head">
<h2>Latest Bits</h2>
</div>
<div class="row">
<div class="col-md-8 template-spot">
<article class="style2 template">
<div class="row">
<div class="col-md-6 col-sm-6">
<a href="http://www.google.com" class="template-url">
<div class="article-thumb">
<img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt="" />
</div>
</a>
</div>
<div class="col-md-6 col-sm-6">
<div class="post-excerpt">
<h3 class="template-title">This is my first article</h3>
<div class="meta">
<span>by Benjamin K.</span>
<span class="template-date">on Sep 23, 2016</span>
<span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
</div>
<p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
Read More
</div>
</div>
</div>
</article>
</div>
</div>
Same as what Louys did but used for..of loop as it's cleaner.

Accordion within Accordion not working

I am new to this forum. I hope I am not breaking any rules. I am trying to include accordion within accordion and after a lot of research found this solution on your website. I thought I would start with this and modify what I need to make it work for my specific situation, but this solution does not seem to work for me and looks like it worked for the person asking. What am I doing wrong here? Please help.
<!DOCTYPE html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

Include the <script> after the accordeon
<!DOCTYPE html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>content</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
</body>
</html>
Or else wrap your script in:
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
});
Otherwise, when it gets to the part:
var acc = document.getElementsByClassName("accordion");
it cannot get the element by class name that does not yet exist, and acc will be an empty array.

Here you go with a solution using jQuery https://jsfiddle.net/apjnf4xf/1/
$('.accordion').click(function(){
$('.panel').slideUp();
$(this).next('div.panel').slideDown();
});
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<p>content</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Hope this will help you.

You are running the script before the browser even knows that your document has elements with class accordion. Run the script after the window has loaded or as the other answers here suggest, include the script after the accordion HTML markup.
<!DOCTYPE html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
</style>
<script>
window.addEventListener('load',setUpAccordion);
function setUpAccordion(){
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
}
</script>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

how to stop mouse hover function in small window?

why,even after applying java script function to stop mouse hover in small window
it's not working? and even when i click on menu it's background color changes to black.every thing seems fine still it's not working ??
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kewaunee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstarp css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- userdefined css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- jquery file-->
<script src="assets/js/jquery.js"></script>
<!-- bootstarp js-->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<style>
.navbar{
background-color: #3366cc;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="kewaunee.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">Home<b class="caret"></b>
<ul class="dropdown-menu">
<li>home 1</li>
<li>home2</li>
</ul>
</li>
<li class="dropdown">Master<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add Region</li>
<li>Add Tax</li>
<li>Add Milestone</li>
<li>Add Customer</li>
</ul>
</li>
<li>Transaction</li>
<li>Report</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Trigger the modal with a button -->
<li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
<!-- modal login form -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<form role="form" method="post" action="#">
<div class="form-group-sm" class="col-xs-2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group-sm" class="col-xs-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
Forgot password
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!--end of login form -->
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p class="well">Master</p>
<p class="well">Transaction</p>
<p class="well">Report</p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>&#169 Kewaunee 2015</p>
</footer>
</body>
</html>
myscript.js
$(document).ready(function() {
if ($(window).width() > 768) {
$('.dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
}
else {
$('.dropdown').off('mouseover').off('mouseout');
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
});
myscript.css
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #3366cc;
}
.navbar.navbar-inverse{
position: relative;
top: 20px;
}
.navbar-brand{
padding-top: 5px;
}
.navbar-header
{
height:100%;
}
.navbar-inverse .navbar-nav>li>a
{
color: white;
}
.navbar-inverse .navbar-nav .dropdown>a:hover
{
background-color: red;
}
.dropdown:hover .dropdown-menu
{
background-color:#3366cc;
border: 1px solid blue;
}
.dropdown .dropdown-menu a
{
color: white;
}
.dropdown .dropdown-menu a:hover
{
background-color: red;
color: white;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content
{
height: 500px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Dropdown menu*/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
/* Set black background color, white text and some padding */
footer {
background-color: #3366cc;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.modal-body{
height: 200px;
}
</style>

To me this seems to work fine, but if you want the effect not only on page refresh maybe you should in addition to $(document).ready() use also $(window).resize()