Develop Reference

JQuery Select turn off div and display another

I have the flowing html and jquery code on my development site. It works but seems clunky. I am looking for an easier cleaner way to make the function fade in divs and fade out divs.
$(document).ready(function() {
$("#sup1").click(function() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
});
$("#con1").click(function() {
$("#con").show(300);
$("#conselect").show(300);
$("#select").hide(300);
$("#sup").hide(300);
});
$("#con2").click(function() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
});
$(".back").click(function() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select" class="lin">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="sup" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="con" style="display:none">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="conform" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Try this code:
$(document).ready(function() {
$(".js-trigger").click(function() {
const $t = $(this);
const href = $t.attr('href');
$(".js-trigger-target").hide(300);
$(href).show(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor3" class="js-trigger-target">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="anchor1" style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="anchor2" style="display:none" class="js-trigger-target">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Looking at what you have is sufficient enough for what you are trying to achieve. No need to over engineer the simple things. That said, if you must make it a bit cleaner ...it would improve your readability to use named functions over all the anonymous inline functions, see below:
function onCon1Clicked() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
}
function onCon2Clicked() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
}
function onBackClicked() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
}
$(document).ready(function() {
// Click on sup1.
$("#sup1").click();
// Assign click handlers.
$("#con1").click(onCon1Clicked);
$("#con2").click(onCon2Clicked);
$(".back").click(onBackClicked);
});

Place content from a clicked element into another element

Hi I am looking to place content from a child element into another element.
I have a hidden div called "DetailsExpanded" and a series of items called "IconWrapper". On clicking "IconWrapper" I would like to copy the content from that items "ItemDetail" Into "DetailsExpanded" and slide down "DetailsExpanded" with said content
Please see below my html structure.
I have begin on the sliding js but I am a bit out of my depth unfortunately.
$( ".IconWrapper" ).click(function () {
if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
$( ".DetailsExpanded" ).slideDown( "fast" );
} else {
$( ".DetailsExpanded" ).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>

All you have to do is to take the .html() of the clicked element and to set it in your .DetailsExpanded element :
$(".IconWrapper").on("click", function() {
var content = $(this).find(".ItemDetail").html();
$(".DetailsExpanded").html(content);
$(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide
});

$( ".IconWrapper" ).click(function () {
var text = $(this).find('.ItemDetail').text();
$( ".DetailsExpanded" ).html(text).slideDown( "slow" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy1</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy2</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy3</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
Is this what you are looking for ?

$(document).ready(function(){
$('.IconWrapper').on('click', function(e) {
$(".DetailsExpanded").text($(this).text()).slideDown();
});
});

open difrent contents in popup window

This code is working and all, but both links are opening the same info, which is the info of link2 `POP2, . If i remove the second link, the first one opens without problem. What am i missing ?
HTML
$(document).ready(function(){
$('.open').click(function() {
$('.pop_background').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('.close').click(function() {
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop
</a>
</div>
</div>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop2
</a>
</div>
</div>

The codes are all referencing the same object. You have to assign IDs to each.
Update: I have created a javascript function to accept the parameters which is the container id so you can call it once. Its at the bottom of this answer
HTML
<div id="pb1" class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb1" class="open" href="#">
click to open pop1
</a>
<div id="pb2" class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb2" class="open" href="#">
click to open pop2
</a>
</div>
</div>
JAVASCRIPT
Repeat the code for pop2
<script>
$(document).ready(function(){
$('#openpb1').click(function() {
$('#pb1').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('#pb1 .close').click(function() {
$('#pb1').fadeOut();
$('#pb1').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
</script>
Using it as a function
<script>
function myPopup(container){
$(container).fadeIn();
$('.pop_box').fadeIn();
return false;
}
$('#openpb1').click(function() {
myPopup('#pb1');
});
$('#openpb2').click(function() {
myPopup('#pb2');
});
</script>

To me it looks like you have only written the JavaScript for the first pop-up? You are not telling the computer which pop-up it should open.

class selectors for jquery buttons not responsive

I'm incorporating jquery into an html file and have had some trouble getting a button to produce some action when I click on it. I've successfully managed to produce an alert for the event whereby I click on a div, but the button is a different matter.
<script type = "text/javascript">
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN PAGE HEADER-->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Verification & Validation Tools <small>statistics and more</small>
</h3>
<ul class="page-breadcrumb breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
Users
</li>
<li class="pull-right">
<div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change overview date range">
<i class="fa fa-calendar"></i>
<span>
</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<form class="form-horizontal" method="post" action="validateuser" >
<div class="validate">
<div class="form-group">
<label class="col-md-2 control-label">Email Address to Activate</label>
<div class="col-md-5"><input class="form-control" type="text" name="emailAddress"></input></div>
<button type="submit" class="btn-green"><i class="fa fa-check"></i> Validate</button>
</div>
</div>
</form>
</div>

I think the problem may be that the document it is not fully loaded when you add those event listeners. Try to use:
$(function() {
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
Which is a shortcut for
$(document).ready(function() {
...
});

You're running the code before anything exists on the page
Use the jQuery ready wrapper https://api.jquery.com/ready/
<script>
$(function() {
// put your code here
})
</script>

wrap your javascript code inside . your code maybe attach event before
DOM load .
$(document).ready(function(){
// code here
});
or add your code at end of page

Wrap the script code inside document.ready function like:
$(document).ready(function(){
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});

how to slide up current div

i want to slideUp the current div that is open(that doesn't work), but when i open another div, the div before must slideup (that works). Maybe anyone can help me.
Here is a jsfiddle with the problem: http://jsfiddle.net/Evolutio/xbsm734f/
my jQuery code looks like this:
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
if($(this).siblings().hasClass('slided_down')==false) {
$('ul.faq .slided_down').removeClass('slided_down');
}
var $faq_desc = $(this).find('.faq_desc');
if($faq_desc.hasClass('slided_down')) {
$faq_desc.removeClass('slided_down').slideUp();
} else {
$faq_desc.addClass('slided_down').slideDown();
}
$(this).siblings().find('.faq_desc').slideUp();
e.preventDefault();
});
});
my html:
<ul class="faq">
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdaasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdasdasdadasdasdasdasdassdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdadasdasdasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdsadadasdasdasdasdadasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdsa <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dadsadadaassdasdasdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdasdasasdasdasdasdas <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dasdasdadasdsadsadasdsadasdasd</p>
</div>
</li>
</ul>

You can use .slideToggle()
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO
Update
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.not($(this).find('i.fa')).removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up')
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO