We Keep Coding

How can I display further text after a div element is clicked?

Currently I am working on a personal project. You can see the website I am making so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
The problem is that I am struggling to add the following feature. The feature is when a user clicks on any of the 6 colored boxes, a further information section should display like below:
I have tried adding a paragraph with an id that has it's display set to none initially. When the user clicks on one of the boxes, the corresponding text for that topic should be shown.
HTML
<p id="fbAdCampaignText> Example Text here </p>
CSS
#fbAdCampaignText {
display:none;
}
.display {
display:inline-block;
}
jQuery
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaignText").toggleClass("display");
});
Note: i am using display:none instead of visibility:hide because I don't want the hidden text to take up space since if it did, it may mess up the structure of each of the 6 boxes.
However, this code doesn't seem to do what I want, that is, show corresponding further information depending on which 1 of the 6 boxes is clicked. How can I display further text after an element is clicked in this manner?

You meant this?
https://codepen.io/dravas/pen/NVgvgN?editors=1010
Just change
$("#fbAdCampaignText").toggleClass("display")
to
$("#fbAdCampaignText").toggle()
And if you want to trigger only that div that is inside clicked element then:
$(".fbAdCampaigns").on('click', function(){
$(this).find("#fbAdCampaignText").toggle();
});

Okay, a couple of things here. Firstly, you can't have more than 1 of the same id in your document, so if you have 6 of those paragraphs, lose the id and use a class instead.
Using an id also gives you specificity issues, where the .display class would still have been overridden by the id's styles.
The other thing is that in your jQuery, you're going to toggle the class on all of those elements if you use a class. You need to specifically toggle the class for the element you clicked, so use $(this) instead - to target the element you clicked.
HTML:
<p class="fbAdCampaignText> Example Text here </p>
CSS:
.fbAdCampaignText {
display:none;
}
.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
display:inline-block;
}
jQuery
$(".fbAdCampaigns").on('click', function(){
$(this).toggleClass("display"); // only target the clicked element
});

Toggle show/hide (jQuery)

There are many posts on this topic already but none that address my issue directly. Here is my current setup:
I have a div with the ID #ptwesv;
and another div containing the content I want to show hide with the ID #ptwest.
The jQuery I'm using is this:
<script>
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").hide();
});
</script>
This is hiding the #ptwest container correctly on click, but then doesn't show the conatiner when I click the trigger element (#ptwesv) again. I presume this is because once the element has been hidden, clicking on the trigger again is causing the actions to work against each other.
I'm using this W3 exmaple as a reference, the only salient different I notice is that there are different trigger elements for show/hide.
Is it possible to trigger show/hide of an element from the a single div and how can I get this to work?

jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
is the way you want. It toggles the element. So if it is shown it hides and the other way around.
At the moment the element will always hide, because of twice the same click element.

Because Id is unique for whole document. try with toggle()
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});

The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
$("#ptwesv").click(function(){
$("#ptwest").toggle();
});

Hide the element within the div

I'm duplicating the div #Play_Start. I have a event within div On select of Play from Dropdown it hides the Green div with Play text.
It works fine on first div. But doesn't work on duplicated div.
I want to hide the green div on selection of dropdown Play option from particular div.
E.g : from div one dropdown selected play option it should hide the green div of only that div not other.
and same with other divs. It should hide the green div on selection of dropdown option from same div.
My fiddle here : http://jsfiddle.net/kgm50e43/2/
at the moment it only works for first div and not for other duplicated divs.

There are multiple problems on your code,
You are duplicating the id's. Id should be unique. You need to replace it with class names.
You don't need to write inline function calls from elements. you can use jQuery to bind events to the elements.
Since you are creating the elements dynamically, you need to use delegates for binding the elements.
Then you can use like this,
$(document).on("change", ".Inputs-Control", function () {
$(this).closest(".Play_Start").find('.IconTest').hide();
});
Fiddle

Don't use IDs when duplicating elements. You should only have 1 ID (unique). You should use classes.
I think this is what you are looking for. I'm not going to be writing your code for you - but you should be able to figure it out using this.
$('.input-control').on('change', function(){
var val = $(this).val();
if(val === "0"){
$(this).parent().find('.hide-me').hide();
}
});

Check checkbox = Toggle class in div (with many same divs)

I have a list of divs (#div1, #div2, #div3 etc). Each one of those divs contain different pictures and texture. The divs share the same layout class and they all contain a checkbox (all checkboxes also have one class).
I want the individual div to toggle class when the checkbox inside it are checked.
How to manage this without all divs toggle class when click a checkbox in one div?
Thanks.

http://jsbin.com/exasow/1/edit
$(':checkbox').click(function(){
$(this).closest('div[id^=div]').toggleClass( 'superclass' );
});
you can use both click or change function.
http://api.jquery.com/closest/ will allow you to have your checkbox inside other elements, it will always search up the DOM tree for the desired parent:
div[id^=div] means DIV element which ID starts with the word "div" and will work for all your div1, div2, div*** selectors.

Try this. DEMO.
Use the .click() for the checkbox and then get its parent div by using .parent() then call .toggleClass('classforparentdiv').
UPDATE
Here.
Hope it helps.

Give a Id to the checkboxes and on basis of that toggle the parent div class
or, listen to the event and toggle the class of the parent div
Something like this,
$(event.currentTarget).parent().toggle('className');

JQuery expands all divs on page

One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/

How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.

In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.

I think you need to use $(this) inside the click function rather than $('.lol')
demo

I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.