Develop Reference

Multiple show/hide divs with separate toggle

I have been trying to create multiple divs which should be hidden at page load. The div should be shown if the corresponding button is clicked and should hide if the same button is clicked again. Also if one of the divs is being shown and another button is clicked, then the div corresponding to that button should show up. If the same button is clicked again then the div should hide.
I have followed a thread on SO for the same and am able to show divs corresponding to button click but the toggle functionality is not working.
Please find the fiddle :
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
https://jsfiddle.net/8pyovyqn/3/
Any help is appreciated.

Use not to hide the all except clicked one and set style="display:none;" for all the div to hide them by default.
$(function() {
$('.showSingle').click(function() {
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div' + $(this).attr('target')).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

You can use toggle to achieve what you need:
jQuery(function(){
jQuery('.showSingle').click(function(){
var target = $(this).attr('target');
$('#div'+target).toggle('.hide');
});
});
.targetDiv{
display: none;
}
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

Try the below jQuery code, Replace this code with your jQuery code and check functionality it will work. The toggle function is used to toggle for hide and show the element.
jQuery(function(){
jQuery('.targetDiv').hide();
jQuery('.showSingle').click(function(){
jQuery('#div'+$(this).attr('target')).toggle();
});
});

First of all set display attribute of all divs to none:
<div class="buttons">
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>
Then toggle div like below:
jQuery(function(){
jQuery('.showSingle').click(function(){
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div'+$(this).attr('target')).toggle();
});
});
You can do like below fiddle to achieve that:
https://jsfiddle.net/8pyovyqn/28/

So many answers already, but I think none of them work the way #Pravin wants it to work.
So here is my suggestion:
jQuery(function(){
jQuery('.showSingle').click(function(){
var objdiv = $('#div'+$(this).attr('target'));
var toggleDisplay = false;
if(objdiv.css('display')=="none"){
toggleDisplay = true;
}
jQuery('.targetDiv').hide();
objdiv.toggle(toggleDisplay);
});
});
Fiddle here...

elements with the same class name in javascript

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

javascript function show / hide multiple divs with first div visible

Im trying to make the first target div always be visible when the page loads whilst the others become visible as the user selects the option. Currently they are all hidden as the page is loaded and only become visible once the buttons are clicked.
JS
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

You can use $('.targetDiv:not(#div1)').hide() DEMO
$('.targetDiv:not(#div1)').hide();
$('.show').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

use :gt(0):-
:gt() Select all elements at an index greater than index within the matched set.
$('.targetDiv:gt(0)').hide();
Note:
target
This attribute specifies where to display the linked resource. (_self,
_blank, _parent, _top)
Use this attribute only if the href attribute is present.
Therefore I would recommend using data:-
<a class="show" data-target="1">Option 1</a>
and get the value using:-
$(this).data('target')

Call .show() on the first div after hiding the others:
$('.targetDiv').hide();
$('#div1').show();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Try this code
$(".targetDiv").not(':first').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Another way you can simply hide div by css in HTML JSFiddle
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum 4</div>
Javascript
//$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Show hide div with active state

How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}

use removeClass() before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>

You just need to call removeClass() on all the .showSingle elements before toggling the class on the one which raised the event:
$('.showSingle').removeClass('greenactive');
Working example

Links stop working when using jquery to hide/show divs

I've succeeded in getting divs to show/hide but now for some reason, all other links on the page stop working unless if I open them in a new tab. How can I get this fixed?
$(document).ready(function () {
$("#div9").show("slow").siblings().hide("slow");
$('a').click(function () {
event.preventDefault();
var divname = this.name;
$("#" + divname).show("slow").siblings().hide("slow");
});
$('#seeAll').click(function() {
$('#div2').show("slow")
$('#div3').show("slow")
$('#div4').show("slow")
$('#div5').show("slow")
$('#div7').show("slow")
$('#div8').show("slow")
$('#div9').hide("slow")
})
});
<a class="people-letters" href="#" name="div2">A</a> <a class="people-letters" href="#" name="div3">B</a> <a class="people-letters" href="#" name="div4">C</a> <a class="people-letters" href="#" name="div5">D</a> E F G H I J K L M N O P Q R <a class="people-letters" href="#" name="div7">S</a> T U V <a class="people-letters" href="#" name="div8">W</a> X Y Z  <a id="seeAll" class="people-letters" href="#">See All</a>
<div>
<div id="div2" style="display: none;">
div2
</div>
<div id="div3" style="display: none;">
div3
</div>
<div id="div4" style="display: none;">
div4
</div>
<div id="div5" style="display: none;">
div5
</div>
<div id="div7" style="display: none;">
div7
</div>
<div id="div8" style="display: none;">
div8
</div>
<div id="div9" style="display: none;">
div9
</div>
</div>
Sample Link

EDIT:
You have bound your click event to ALL link elements by specifying 'a' as your selector. in order to bind it only to that specific link you can use your class that you've specified for the links that hide and show the div elements.
$('a.people-letters').click(function (event) {
event.preventDefault();
var divname = this.name;
$("#" + divname).show("slow").siblings().hide("slow");
});