We Keep Coding

Can I create actions based on HTML elements to show and hide divs with javascript?

Novice -
I am building a page in a TinyMCE wysiwyg and want to be able to show and hide divs when a link/button is clicked. The way things are structured, it appears I can't add javascript into the html section, so I am identifying the links with javascript.
From examples I was able to create the following code, which toggles a single div when clicking on any button marked with the toggleLink class. Is there a good way to target individual elements to show 1 div and hide the rest? I think getElementById might be heading in the right direction, but I am not sure how to apply the eventListeners individually
var togg = document.getElementsByClassName("toggleLink");
var i;
for (i = 0; i < togg.length; i++) {
togg[i].addEventListener("click", function() {
this.classList.toggle("active");
var openDiv = document.getElementById("myDIV1");
if (openDiv.style.display === "none"){
openDiv.style.display = "block";
} else {
openDiv.style.display = "none";
}
});
}
.demoLinks {
background-color: #fff;
height: 200px;
width: 15%;
font-size: 14pt;
color: #ffffff;
background-color: #3156f3;
padding: 20px 0px 20px 20px;
font-family: 'Lato', sans-serif;
float: left;
position: sticky; top: 100px;
}
.demoLinks p {
margin-bottom: 2px;
padding-left: 15px;
color: #ffffff;
}
.demoLinks p a {
color: #ffffff;
}
.toggleLink {
color: #ffffff;
cursor:pointer;
}
.demoVideos {
background-color: #fff;
width: 75%;
padding: 0px 0px 20px 20px;
font-family: 'Lato', sans-serif;
float: right;"
}
<div>
<div class="demoLinks">
<p style="margin-bottom: 8px; color: #ffffff; font-weight: bold;">Products:</p>
<p><a class="toggleLink">This Link</a></p>
<p><a class="toggleLink"> ThatLink</a></p>
</div>
<div class="demoVideos">
<div id="myDIV1" style="display: block;">
<p style="margin-bottom: 0.25em;"><span style="font-family: 'Lato', sans-serif; color: #2b28bc; margin-bottom: 0.5em;"><strong><span style="font-size: 24pt;">Product Demo 1</span></strong></span></p>
<div style="height:585px; width:1034px; background-color:#333333;"></div>
</div>
<div id="myDIV2" style="display: none;">
<p style="margin-bottom: 0.25em;"><span style="font-family: 'Lato', sans-serif; color: #2b28bc; margin-bottom: 0.5em;"><strong><span style="font-size: 24pt;">Product Demo 2</span></strong></span></p>
<div style="height:585px; width:1034px; background-color:#333333;"></div>
</div>
</div>
</div>
Thanks for any assistance!

You can correlate your links with your targets using a suffix on the 'id' property. So, for instance, you can give your first link an id of 'link1', which you can then relate to 'myDIV1' by replacing the text 'link' with 'myDIV'. And the same logic then for all link-div associations.
Once you have that, you should know that the function you pass to an event listener accepts a parameter which is the event that ultimately calls it. You can use this to get the id of the link that was clicked (e.target.id);
With that you can show the target div you're interested in, and hide the rest.
Below is a very simplified version of your code, along with my recommended logic. I should let you know that querySelectorAll has similar purposes to getElement(s)By..., but lets you select using css selectors. Also, the syntax 'test ? trueResult : falseResult' can be replaced by an if/then statement if you desire.
var links = document.querySelectorAll('.toggleLink');
var demos = document.querySelectorAll('.demoVideos > div');
for (var l = 0; l < links.length; l++) {
links[l].addEventListener("click", function(e) {
var linkDivId = e.target.id;
var targetDivId = linkDivId.replace('link', 'myDIV');
for (var d = 0; d < demos.length; d++)
demos[d].style.display = demos[d].id == targetDivId ? 'block' : 'none';
});
}
<div class="demoLinks">
<a id='link1' class="toggleLink">Demo 1 Link</a><br/>
<a id='link2' class="toggleLink">Demo 2 Link</a>
</div>
<br/>
<div class="demoVideos">
<div id="myDIV1" style="display: none;">
Product Demo 1
</div>
<div id="myDIV2" style="display: none;">
Product Demo 2
</div>
</div>

First off, forgive me a bit I took some liberties with your markup and CSS to make it easier for me to visualize the task at hand - toggle of visibility.
Rather than use an element id, I would suggest a class but here, I put in a data-linktarget on each of the links so you can simply put a selector in there and use either an id, class or whatever you choose which should give your task some flexibility.
Next, I used a hidden class to toggle the visibility of the target - this can be done several ways but I used this to help make intent clear. I also toggle the "active" class but did not do anything with it other than facilities what you had started.
Rather than a complex set of event handlers on multiple id's, I used a class to target the toggleLink class.
I made the code somewhat simple but enough to illustrate what it is doing.
function handleEvent(event) {
let videos = document.querySelector(".demo-videos");
let hideMe = videos.querySelectorAll(".demo-thing:not(.hidden)");
hideMe.forEach(function(el) {
el.classList.toggle("hidden", true);
el.classList.toggle("active", false);
});
let vSelected = videos.querySelector(this.dataset.linktarget);
vSelected.classList.toggle("hidden", false);
vSelected.classList.toggle("active", true);
}
Array.prototype.filter.call(document.getElementsByClassName("toggleLink"), function(testElement) {
testElement.addEventListener("click", handleEvent);
});
.hidden {
display: none;
}
.demo-container {
font-family: 'Lato', sans-serif;
}
.demoLinks {
height: 200px;
width: 15%;
font-size: 14pt;
background-color: #3156f3;
padding: 20px 0px 20px 20px;
float: left;
position: sticky;
top: 100px;
font-weight: bold;
}
.demo-links-title-text {
font-size: 1.2em;
color: #FFFF00;
}
.demoLinks .demo-link {
margin-bottom: 8px;
font-weight: bold;
margin-bottom: 2px;
padding-left: 15px;
}
.toggleLink {
color: #FFFF88;
cursor: pointer;
}
.demo-videos {
background-color: #fff;
width: 75%;
padding: 0px 0px 20px 20px;
float: right;
}
.demo-videos .header-part {
margin-bottom: 0.25em;
}
.demo-videos .header-part .header-part-text {
color: #2b28bc;
margin-bottom: 0.5em;
font-size: 24pt;
font-weight: bold;
/* put back <strong> tags if desired instead */
}
.demo-videos .block-part {
height: 585px;
width: 1034px;
background-color: #333333;
color: cyan;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="demo-container">
<div class="demoLinks">
<p class="demo-links-title-text">Products:</p>
<p class="demo-link"><a class="toggleLink" data-linktarget="#myDIV1" href="#">This Link</a></p>
<p class="demo-link"><a class="toggleLink" data-linktarget=".demo-thing:nth-child(2)" href="#">ThatLink</a></p>
<p class="demo-link"><a class="toggleLink" data-linktarget=".demo-thing:nth-child(3)" href="#">That new Link</a></p>
</div>
<div class="demo-videos">
<div id="myDIV1" class="demo-thing active">
<p class="header-part"><span class="header-part-text"><span>Product Demo 1</span></span>
</p>
<div class="block-part">I am first</div>
</div>
<div id="myDIV2" class="demo-thing hidden">
<p class="header-part"><span class="header-part-text"><span>Product Demo 2</span></span>
</p>
<div class="block-part">Happy Day</div>
</div>
<div id="another-id" class="demo-thing hidden">
<p class="header-part"><span class="header-part-text"><span>Product Demo New</span></span>
</p>
<div class="block-part">Wonderful news</div>
</div>
</div>
</div>

onClick JS not go to top of the page

I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>

You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.

Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di

How to add active class with JQuery on a custom element?

I have made a custom card component with plain html and css. This is my code for HTML:
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
And this is my css code for the styling:
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover {
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
The card component is looking good. Now I want to add an active class to the item. I have made a hover and when I click on the item and I want that the hover color stays (active).
This is my JQuery code:
$(document).ready(function(){
$('item').click(function(){
$('item').removeClass("active");
$(this).addClass("active");
});
});
The hover is working good but when I click on it the background-color doesn't stay active.
I have made a jsfiddle so you can see the behaviour:
https://jsfiddle.net/gvu9nk8d/2/
Can someone point me in the right direction?

Two things you need to correct
1. your jquery click event selector is missing dot for class item
2. You need to add class active in the CSS
$(document).ready(function(){
$('.item').click(function(){ //added dot here
$('.item').removeClass("active");//added dot here
$(this).addClass("active");
});
});
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover, .item.active { /* added class here*/
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
JSFiddle Demo

You are missing the dot at class item
$(document).ready(function(){
$('.item').click(function(){
$('.item').removeClass("active");
$(this).addClass("active");
});
});

The problem with your code was that you have used the wrong selector.
It should be $('.item') since item is a class. Then the active class will be added
Also include some style to make changes when the item is active

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

How to make slideToggle dynamic in JQuery

I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});

Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>

The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});

Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});

Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>