Im new to javascript because I skipped it and jumped to jquery and now Im writing a javascript code but I'm having trouble. I have multiple elements with the same class name and below each element is an a-tag. i want to hide/show the element upon clicking the button below it. How can i do this in javascript? (no jquery please).
HTML
<div>
<div class="content">content 1</div>
<a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 2</div>
<a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 3</div>
<a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
CSS
.content {
display: none;
}
Javascript
var status = "less";
function toggleText1() {
if (status == "less") {
document.getElementsByClassName("content")[0].style.display = 'block';
document.getElementsByClassName("show-more")[0].innerText = "See Less";
status1 = "more";
} else if (status1 == "more") {
document.getElementsByClassName("content")[0].style.display = 'none';
document.getElementsByClassName("show-more")[0].innerText = "See More";
status1 = "less";
}
}
in my original code i named my content as content1,content2 and my a-tag as show-more1,show-more2 then my functions as toggleText1,toggleText2 and so on. It works but i find it inefficient. Can you guys guide me to the right path?
Here's one of methods how to solve it. Catch all the links, then use Array#forEach to iterate over them and bind click event to every element. Then find the div element in the parent node and toggle it's class from hidden to visible.
ES6 solution.
var elems = document.getElementsByClassName("show-more");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
}));
.hidden {
display: none;
}
<div>
<div class="content">content 1</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 2</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 3</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
ES5 solution.
var elems = document.getElementsByClassName("show-more");
for (var i = 0; i < elems.length; i++){
elems[i].addEventListener('click', function(){
this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
})
}
.hidden {
display: none;
}
<div>
<div class="content">content 1</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 2</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 3</div>
<a class="show-more" href="javascript:void(0);">Show more</a>
</div>
First, you can pass the element in the onclick by using the this as the argument/parameter to know the source of the on click. Then you get the parent and get the correct content div and use the style element and to do some logic on what to display or hide.
And according to your post, you should also make your content divs hidden by default.
function toggleText(aTag) {
var content = aTag.parentNode.getElementsByClassName("content")[0];
if(content.style.display == null || content.style.display == "none")
{
content.style.display = 'block';
aTag.innerText = "See Less";
}
else
{
content.style.display = 'none';
aTag.innerText = "See More";
}
}
<div>
<div class="content" style="display:none;">content 1</div>
<a class="show-more" onclick="toggleText(this);" href="javascript:void(0)">Show more</a>
</div>
<div>
<div class="content" style="display:none;">content 2</div>
<a class="show-more" onclick="toggleText(this);" href="javascript:void(0)">Show more</a>
</div>
<div>
<div class="content" style="display:none;">content 3</div>
<a class="show-more" onclick="toggleText(this)" href="javascript:void(0)">Show more</a>
</div>
also is it just me, or that just smells like a homework?
var hidePrev = function(event){
element = event.target;
element.previousSibling.previousSibling.classList.toggle('hidden');
};
.hidden {
display: none;
}
<div>
<div class="content">content 1</div>
<a class="show-more" onclick='hidePrev(event);'
href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 2</div>
<a class="show-more" onclick='hidePrev(event);'
href="javascript:void(0);">Show more</a>
</div>
<div>
<div class="content">content 3</div>
<a class="show-more" onclick='hidePrev(event);'
href="javascript:void(0);">Show more</a>
</div>
You can also use a delegated event listener, which is an event listener assigned to a common ancestor element.
Check to see if the element is the type of element we are looking for (this check will probably change based on the actual content of the page), then select the previous element sibling and change the display property and text based on the current values.
This example uses a fat arrow function (introduced in the ECMAScript 2015 language specification), but a normal function expression would suffice if supporting old browsers is required.
document.addEventListener('click', event => {
const element = event.target
if(event.target.classList.contains("toggle")) {
const previous = event.target.previousElementSibling
const text = element.textContent
element.textContent = element.dataset.toggleText || "Show less"
element.dataset.toggleText = text
previous.classList.toggle('hidden')
}
})
.hidden {
display: none;
}
<div>
<div class="content hidden">content 1</div>
<a class="toggle" href="#">Show more</a>
</div>
<div>
<div class="content hidden">content 2</div>
<a class="toggle" href="#">Show more</a>
</div>
<div>
<div class="content hidden">content 3</div>
<a class="toggle" href="#">Show more</a>
</div>
Crazy, CSS Only Answer - for fun and educational purposes only
This does have some practical application, you could pre-open one of your content areas by adding a hash to the url. E.g http://yourdomain/page#Content2
.content .show-less {
display: block;
}
.content {
display: none;
}
#content-container .content:target {
display: block;
}
#content-container .content:target~.show-more {
display: none;
}
<div id="content-container">
<div>
<div class="content" id="Content1">content 1 Show Less</div>
<a class="show-more" href="#Content1">Show more</a>
</div>
<div>
<div class="content" id="Content2">content 2 Show Less</div>
<a class="show-more" href="#Content2">Show more</a>
</div>
<div>
<div class="content" id="Content3">content 3 Show Less</div>
<a class="show-more" href="#Content3">Show more</a>
</div>
</div>
More Reading:
Sibling Selector
Target Pseudo Class
Related
if the code is as below -
<div class="test1">
<div class="bla1">
</div>
</div>
how do I remove the href link above using javascript once the window has loaded?
Like this - assuming you want to remove the first instance of the link in a div with class test1
window.addEventListener("load",function() {
document.querySelector(".test1 a").remove()
})
div.test1 { border:1px solid red }
<div class="test1">
<div class="bla1">Bla 1</div>
Link
</div>
<div class="test1">
<div class="bla2">Bla 2</div>
Link
</div>
<div class="test1">
<div class="bla3">Bla 3</div>
Link
</div>
Remove all of the links in divs with class test1
window.addEventListener("load",function() {
[...document.querySelectorAll(".test1 a")].forEach(link => link.remove()); // IE11 compatible forEach
// document.querySelectorAll(".test1 a").forEach(link => link.remove())
})
div.test1 { border:1px solid red }
<div class="test1">
<div class="bla1">Bla 1</div>
Link
</div>
<div class="test1">
<div class="bla2">Bla 2</div>
Link
</div>
<div class="test1">
<div class="bla3">Bla 3</div>
Link
</div>
Ok I have different sections for my homepage.
This is the code of the menu bar:
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">Home</li>
<li>Services</li>
<li>About Digm</li>
<li>Contact Us</li>
<li><b>FREE Audit</b></li>
</ul>
</div>
These work fine as far as going to the sections I need them to is concerned.
But I also have buttons wrapped in DIV elements for a slideshow. The buttons work if I make them external links to leave my site, but they won't let me use them to go to the same sections I can go to with the menu bar links.
These are the DIVs with the buttons:
<div id="ubea-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>It's time to shift strategies.</h2>
<p>FREE Audit</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Experience The Butterfly<br />Effect</h2>
<p>Read More</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Ready? Book A Consultation</h2>
<p>Why Wait?</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
The code I have for 1 the sections looks like this:
<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="ubea-container">
<div class="row text-center">
<div class="display-t">
<div class="display-tc">
<div class="col-md-12">
<h3>If you have inquiries please email us at <b>info#blahblahblah.com</b></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone see why the buttons won't scroll to the sections?
Anchor elements href property does that by default. Simply give the target element the id attribute matching the href="#introduction" on the menu anchor.
<div>
<ul>
<li>Intro</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="intro">Intro</h4>
<p>Foo bar.</p>
What does your CSS look like?
You could always use JavaScript:
// we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
// select the target slide
var slide = document.getElementById("slide_1");
// show the target slide
slide.style.display = "block";
// hide the slides siblings
forEach.call(slide.parentNode.children, function(s) {
// NOTE: don't hide the target slide!
if(s !== slide) {
s.style.display = none;
}
});
});
Or if you prefer, you could just use jQuery:
$("#button_id").on("click", function() {
$(this).show().siblings().hide();
});
Also, avoid using so many div's, try to use semantic tags instead.
Too many div's will make your code hard to maintain and the overuse of the div tag can lead to a div soup, which can be horrible to maintain.
Good luck.
I'm trying to refactor my jquery code to vanilla because I want to use js properly. But I'm having a problem. I cannot figure out how for example trigger event only on third element with specific class. Because querySelector always returns the first element with that class for example this is my half finished code
const box = document.querySelector('.media-page--box-container');
$(box).on('mouseenter', () => {
// $(this). => select hovered element and do something only on it
console.log('enter')
}).on('mouseleave', () => {
console.log('leave')
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
You can find example in the snippet
Use the code below if you want to add a listener to one element.
const box = document.querySelector('.media-page--box-container');
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container">.media-page--box-container</div>
Or this code for few elements
const boxes = document.querySelectorAll('.media-page--box-container');
boxes.forEach(function(box){
box.addEventListener("click", function() {
console.log("Clicked!");
});
});
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
querySelector returns one object, querySelectorAll and getElementsByClassName return array of objects. Not getElementsByClassName require class name, not selector in parameters.
console.log("querySelector", document.querySelector('.media-page--box-container'));
console.log("querySelectorAll", document.querySelectorAll('.media-page--box-container'));
console.log("getElementsByClassName", document.getElementsByClassName('media-page--box-container'));
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
Note, if there will be no elements on the page, methods will return null. So, you should check this case. If box will null, the code will break with an error.
const box = document.querySelector('.media-page--box-container');
console.log("box value", box);
// Wrong:
box.addEventListener("click", function() {
console.log("Clicked!");
});
// Correct:
if (box !== null)
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container-A">.media-page--box-container-A</div>
<div class="media-page--box-container-B">.media-page--box-container-B</div>
This answer should highlight a few things. You may need to handle event bubbling differently. I added e.target to the hover message. Your target is a block element that will trigger the mouse events even where you can't see it so I highlighted it in red. querySelectorAll will grab all elements not just the first one the way querySelector works.
const boxes = document.querySelectorAll('.media-page--box-container');
boxes[2].addEventListener("mouseover", myMouseover );
boxes[2].addEventListener("mouseleave", myMouseout);
function myMouseover(e) {
console.log('enter' + e.target);
}
function myMouseout() {
console.log('leave');
}
.media-page--box-container:not(:first-child) {
margin-top: 50px;
}
.media-page--box-container {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
You can use querySelectorAll to retrieve all nodes matching your selector.
Because it returns a NodeList, which is an array-like object, you can traverse that by invoking array.prototype.foreach and passing through the nodelist.
From there you can add event listeners to each item in the node list, or any individual node based on the iterator.
const boxes = document.querySelectorAll('.media-page--box-container');
Array.prototype.forEach.call(boxes, (box, i) => {
if (i===2) {
box.addEventListener('mouseenter', () => {
console.log('enter')
});
box.addEventListener('mouseleave', () => {
console.log('leave')
});
}
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working
You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo
Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();
sorry for the midunderstanding. I meant index, not value. Sorry.
I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?
For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.
Here is my fiddle: http://jsfiddle.net/kqbLtn8b/1/
HTML:
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
jquery:
var boxVal = $('.box').val();
Thanks for any help!
What I am really trying to do is shorten the code from something like this:
$('.one').on('click', function(){
$('.b-one').show()
});
and so forth with the rest
Try this : use index of content div to show hidden-box
$(function(){
$('.content').click(function(){
var index = $(this).index();
$('.hidden-content .hidden-box:eq('+index+')').show();
});
});
And make change in your css, instead of hiding hidden-content div you need to hide hidden-box. So change your
.hidden-content{
display:none;
}
to
.hidden-box{
display:none;
}
Demo
If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.
Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.
Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.
So my suggestion would be to follow the below method.
HTML:
<div class="box">
<div class="content one" rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-1">one</div>
<div class="hidden-box b-2">two</div>
<div class="hidden-box b-2">three</div>
</div>
JS:
$('.content').on('click', function(){
var divNum = this.rel;
$('.b-'+divNum).show();
});
I recommend restructuring your HTML in the following way:
<div class="box">
<div class="content" id= "c1">
<h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
<h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
<h1>Cont 3</h1>
</div>
<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>
then use this as your jquery code:
$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});
and by the way, change your css too:
.hidden-content{
/* display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}
This is another way (although not so reliable, as it would break if you change your classes):
$(function () {
$('.content').on('click', function () {
var className = $(this).attr('class').replace('content', '').trim();
$('.hidden-box').hide();
$('.b-' + className).show();
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
UPDATE
Based on #Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup.
You just need to add a data attribute to your markup that will be used to match elements:
$(function () {
$('.content').on('click', function () {
var sel = $(this).data('rel');
$('.hidden-box').each(function () {
$(this).toggle($(this).data('rel') == sel);
});
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
<div class="content one" data-rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" data-rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" data-rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one" data-rel="1">one</div>
<div class="hidden-box b-two" data-rel="2">two</div>
<div class="hidden-box b-three" data-rel="3">three</div>
</div>