Develop Reference

jQuery.toggle() not working on a div

On a web page we have a list of profiles. On the right hand side of the profile is some text, followed by an arrow img#arrow.
When img#arrow is clicked, we have the following jQuery we hope to run:
However, the corresponding .bottom-sec is not toggling.
jQuery('#arrow').click(function(){
var $parent = $(this).parent();
$($parent).addClass('active');
jQuery($parent +' .bottom-sec').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-right">
<h2>Bob Brown</h2>
<h3>Non-Executive Chairman</h3>
<p>Intially showing text.</p>
<div class="bottom-sec" style="display: none;">
<p>Initially hidden text.</p>
</div>
<img id="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png">
</div>

Problem
The problem with your code is exactly what the comment on your question is saying, but he didn't explain anything:
You're combining two different ways of selecting elements. One is with selectors, the other is traversing. You're using them in a way which isn't possible (the $parent + ' .bottom-sec' part). The comment linked to a jQuery page about traversing which you should definitely read! It tells you a lot about how to use traversing functions, which you could use!
Solution
There are multiple solutions to this, but I'll write down the one I think is the best:
First of all, change the HTML a bit. I've removed the element style of .bottom-sec and changed the id of the image to a class, because you have multiple images with the same id on the page, which is not a recommended thing to do. Classes can occur more than once, id's cannot.
<div class="profile-right">
<h2>Bob Brown</h2>
<h3>Non-Executive Chairman</h3>
<p>Intially showing text.</p>
<div class="bottom-sec">
<p>Initially hidden text.</p>
</div>
<img class="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png">
</div>
I've reduced the JavaScript to the following. Note that is just reduced to one line, where a click on the .arrow element goes searching for the closest .profile-right parent. If, for whatever reason, you decide to change the HTML and the .arrow element is no longer a child of the .profile-right, this code still works. The only thing it does is toggle an active class on the .profile-right.
jQuery(document).on('ready', function() {
jQuery('.arrow').on('click', function(){
jQuery(this).closest('.profile-right').toggleClass('active');
});
});
The document ready listener was added because of OP's comment.
With CSS, we can use the new .active class to show or hide the element.
.profile-right .bottom-sec {
display: none
}
.profile-right.active .bottom-sec {
display: block
}
Original Code Fix
If for some reason you wanted to use your original code, this is how it should be:
// Nothing wrong about this part.
// Your only worry should be that there could be
// multiple elements with the same ID, which is something really bad.
jQuery('#arrow').click(function(){
// This part is correct, no worries
var $parent = $(this).parent();
// Removed the $(...), because $parent is already a jQuery object
$parent.addClass('active');
// Changed the selector to a find function
$parent.find('.bottom-sec').toggle();
});
You could also combine all of the code inside the listener function to just one line:
jQuery('#arrow').click(function(){
$(this).parent().addClass('active').find('.bottom-sec').toggle();
});

Change your js code like below.
jQuery('#arrow').click(function(){
var $parent = $(this).parent();
$($parent).addClass('active');
jQuery($parent).find('.bottom-sec').toggle();
});

In your event listener you can catch the element (the down arrow) that triggered the event. It will be referred as this.
Then you can go through the DOM tree using .next() and .parent() to access the <div> to toggle.
Note: you may need more functions than the one I explained above.
Note 2: without code or more detailed information, we can't help you further, I will edit this answer if you add details.

JavaScript: How can I change the class of a div by clicking another div?

I want to make a div appear when I click on another div. I was thinking of doing this by using JavaScript to change the class of the div when the other div is clicked on.
This is the HTML of the div I want to appear:
<div id="menutext1" class="hidden"></div>
This is the HTML of the control div (the one to click on to make the above div appear):
<div id="menu1"></div>
This is the CSS:
.hidden { display: none; }
.unhidden { display: block; }
I've looked everywhere and nothing seems to work for me!
I don't have much experience with JavaScript or JQuery but I can understand it.
Thanks in advance :))

.addClass(), .removeClass() should do what you need. .toggleClass() might also be useful. You want to do something like this in your onClick() method:
$('#menu1').click(function() {
$('#menutext1').addClass('unhidden')
});
Swap in toggleClass() if you want to be able to hide/unhide. I should add that these are JQuery functions so make sure to include JQuery in your project.

You have several options to achieve this:
$('#menu1').on('click', function(){
$('#menutext1').show();
// OR
$('#menutext1').toggleClass('hidden unhidden');
// OR
$('#menutext1').removeClass('hidden ').addClass('unhidden');
});
Demo
Note: When working with jQuery and DOM-Manipulation have a look at the .ready() function.
Reference
.on()
.toggleClass()
.removeClass()
.addClass()
.show()

You can do it without JQuery using the classList.toggle method. And you don't really need the unhidden class. When the hidden class is toggled off, the div should return to its default display (block).
// get the element you want to click on
var controlDiv = document.getElementById('menu1');
// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
// turn the hidden class off or on
document.getElementById('menutext1').classList.toggle('hidden');
});

jQuery set class not working after its already been set

trying to make a simple expanding heading script.
I don't wish to use accordions and just looking for a light weight home made solution. As i enjoy writing and learning things myself.
In my eyes, what i have should work. But it doesnt.
The aim is:
When a heading is clicked, all of the content is hidden and then the next content element after the heading is shown. This prevents more than one content being shown at any time.
After this, the div class gets changed to be a 'selected' state.
This works okay.
However, the next part runs if the heading class is the selected state, and if so it SHOULD change its class back to the normal and also hide the next element content.
The aim is to allow the hide / show options.
The latter part of changing back the class doesnt work however. I also know there is a much for efficient way of writing this, but not sure how.
JS:
$(function() {
$('.headingHelp').click(function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$('.headingHelp_sel').click(function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
});
Example HTML:
<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content
</div>
<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>
JSFiddle: http://jsfiddle.net/C7bHn/1/
Thanks in advance!

Since your "selected" class is added after the DOM is loaded, jQuery is not aware of it.
I suggest using jQuery's on() for delegated events. This will allow you to select dynamically generated classes:
$(document).on('click','.headingHelp',function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$(document).on('click','.headingHelp_sel',function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
Working Example (jsfiddle)
Edit:
Here's another method without using delegation. It just adds/removes a "sel" class rather than changing the class completely.
$('.headingHelp').click(function(){
// save clicked element in a variable for use below
$this=$(this);
// remove / add "selected" class
$('.headingHelp').removeClass('sel');
$this.addClass('sel');
// fade in / out content
$('.infoHelp').fadeOut();
$this.next('.infoHelp').stop().fadeIn();
});
.infoHelp {
display: none;
}
.headingHelp {
background-color:#999;
padding: 1%;
cursor: pointer;
color: white;
}
.headingHelp:hover,
.headingHelp.sel {
background-color:#666;
}
Working Example (jsfiddle)

jQuery selector working "AT CURRENT MOMENT" . Your selector $('.headingHelp_sel') empty when running this code.
Best code:
$(function() {
$('.headingHelp').click(function(){
var open = $(this).next('.infoHelp').is(':visible');
$('.infoHelp').fadeOut();
if(!open)
{
$(this).next('.infoHelp').fadeIn();
}
});
});

Using javascript on multiple Div Id's

I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis

Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.

You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();

just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)

Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...

You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.

You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle

function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>

It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.

Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});

Check out the jQuery selectors and why not just use $(this)?

$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});

Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.