We Keep Coding

Swap div and contents on click

Been trying to swap 2 divs. When the button is clicked #profeditclick1, #profswitch1 should swap with #hideedit1. At the moment when the button is clicked all the divs just disappear. Thank for your help or guidance.
HTML:
<div class="cart_verwrap" >
<div class="cart_verbill" *id="profswitch1">
<div class="btn blue cartprof-btn l-btn txt_fff s16" id="profeditclick1">Edit</div>
</div>
<!-- hidden edit profile in css it set to display:none-->
<div class="cart_verbill" id="hideedit1">
</div>
jQuery:
$("#profeditclick1").click(function(e) {
e.preventDefault();
var content = $(this).html();
$('#profswitch1').replaceWith('<div id="hideedit1">' + content + '</div>');
});
UPDATE
Next attempt although doesnt seem to work. i have taken of the display:none and tried to hide it:
$("#hideedit1").hide();
$("#profeditclick1").click(function(e) {
e.preventDefault();
var content = $(this).html();
$('#profswitch1').replaceWith('<div id="hideedit1">' + content + '</div>');
$("#hideedit1").show();
});

I think this may help you. I have added some modification in your HTML.
Please check it and change it as you need.
jQuery('#hideedit1').hide();
jQuery('#profeditclick1').click(function(){
jQuery(this).hide();
jQuery('#hideedit1').show();
});
jQuery('#hideedit1 #save_edit').click(function(){
jQuery('#hideedit1').hide();
jQuery('#profeditclick1').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="cart_verwrap" >
<div class="cart_verbill">
<div class="btn blue cartprof-btn l-btn txt_fff s16" id="profeditclick1">Edit</div>
</div>
<!-- hidden edit profile in css it set to display:none-->
<div class="cart_verbill" id="hideedit1"> EDIT PROFILE CONTENT <button id="save_edit">Save</button> </div>
</div>

Push/slide menu from left. Need to hide menu by clicking whole page?

I have found this JSFiddle and I do not know how to fix it, so the user can quit the menu by clicking anywhere in the content instead of only clicking the button. I wan't multiple options, and I can't figure it out?
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
Thank you!

You could catch clicks on the <html/> tag and hide the menu:
$('html').click(function() {
$nav_list.removeClass('active');
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
This requires stopping event bubbling up, so your first click function has to start with
$nav_list.click(function(e) {
e.stopPropagation();
Whole thing could for sure be optimized, but it should give you a start.
Here is the updated Fiddle.

In the script i have modified the same script to have a toggle function for the content area, the area with the text "Slideout Navigation"
<script type="text/javascript">
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$content_list = $('#contentpane');
$content_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
</script>
The below is the change done to HTML page. I have added a div for the content so clicking on it can be checked through the script
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
<section class="content">
<div id="contentpane">
<h1>Slideout Navigation</h1>
<p>
</p>
</div>
</section><!-- End Content -->
</div><!-- End Main -->
</div><!-- End Container -->

Replace an object by another object in the same frame in JavaScript?

I have created a list with to options on the homepage (index.html). The problem I am encountering is that when I run the code; if the user clicks on "list_row1" then "table1" shows up (everything works great), and after this if the user clicks on "list_row2" then "table2" shows up 100-200px below table1 (everything does not work great). I want table1 to simply be replaced by table2 and vice-versa in the same spot by the list (list_row1 and list_row2) option the person clicks on.
For example, I want a red circle to be replace by a black circle and vice versa..
Here is my index.html with JavaScript code below:
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1"></div>
<div id = "table1"></div>

Please check your code. you have two divs with same id
<div id = "table1"></div>
<div id = "table1"></div>

Your id is same for both the tables. this should be your code:-
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1">table1</div>
<div id = "table2">table2</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
</script>

Here is an example of how you could toggle the two 'table' divs while also improving your markup: http://jsfiddle.net/8fr0484L/3/
Use <a> anchor tags inside your <li> list items instead of attempting to use divs. This will allow you to make use of the anchor tag's default clickable behaviour.
<ul class="list-group">
<li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
<li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>
In the code it might be worth hiding the 'table' divs in the beginning (on page load), assuming you don't know at that point what the user wants to view.
// hide the tables by default when page loads
$('#table1').hide();
$('#table2').hide();
$('#list_row1').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table2').hide();
$('#table1').show();
});
$('#list_row2').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table1').hide();
$('#table2').show();
});

<ul class="list-group">
<div id = "list_row1"><li class="list-group-item">Exhaust Temperature</li></div>
<div id = "list_row2"><li class="list-group-item">Cylinder Pressure</li></div>
</ul>
</div>
<div id = "table1">abc</div>
<div id = "table2">pqr</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').css({
visibility : "hidden"
});
$('#table1').css({
visibility : "visible"
});
});
$('#list_row2').on('click',function(){
$('#table1').css({
visibility : "hidden"
});
$('#table2').css({
visibility : "visible"
});
});
});
</script>

Hi its a typo both of your table have same id 'table1'. And also a small suggestion hide both the table divs at the load itself. I'm posting the new JavaScript code below have a look.
$(function(){
$('#table2').hide();
$('#table1').hide();
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});

Show a child div when link clicked

I have a series of divs with links and hidden divs. When the link is clicked, I need the hidden div within the parent to be shown. For example:
<div class="track" id="track1">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
So far, the option that I tried opened up ALL of the .song-notes divs, but I want to specify that it's only the child divs of the parent div where the link is contained that should be opened.

I like using .toggle() here.
$('a.notes-link').click(function (){
$(this).next('.song-notes').toggle();
});
jsFiddle example

try this
$(document).ready(function(){
$('.notes-link').click(function(ev){
ev.preventDefault();
$(this).closest('.track').find('.song-notes').show();
});
});
DEMO

You can do this:
$(function () {
$('.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show();
});
});
Demo

$(function () {
$('div.track a.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show(); //$(this).next().toggle();--> to show hide
});
});
.next()
.toggle()

Add id to the hidden divs
<div class="track" id="track1">
Song Notes
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
Javascript Code:
function showNotes(id){
$('#song'+id).toggle();
}
Demo:
http://jsfiddle.net/Zz65U/

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>

load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE

Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})

It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/