We Keep Coding

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Show / Hide child DIVs on click on the main DIV, similar to spoiler (pure JS)

I have 20 rows of DIVs. The initial state hides all spoilers and is like below (I show the first 3 rows here):
<div class="main" onClick="showHide()">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide()">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide()">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
etc..
CSS:
<style>
.main{background:silver;padding:1em;margin-bottom:1em}
.hide{display:none}
.show{display:block}
</style>
My goal is to manipulate/change the spoiler classes after user clicks on the "main" DIV. That is, after clicking on one of the "main" DIVs the "spoiler hide" class should automatically change to "spoiler show" so that the text is shown. And when user clicks on another "main" DIV, all 'spoiler show' classes should change to 'spoiler hide' and only the currently clicked "main" DIV should apply the 'spoiler show' class.
So it's basically like a toggle where only one (the last clicked) DIV shows the spoiler. I hope to find the simplest/fastest solution (JS in one line would work too).
I tried to use some JS function like below, but cannot make it work. I also read that 'document.querySelectorAll' might be used somehow.. I cannot use jQuery here.
<script>
function showHide() {
var e = document.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++) {
e[i].className ='spoiler show';
}
}
</script>

Try this:
<script>
function showHide(sender) {
var e = sender.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++)
{
e[i].className ='spoiler show';
}
}
</script>
<div class="main" onclick="showHide(this)">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide(this)">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide(this)">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
Working fiddle here: http://jsfiddle.net/t0shq84f/

Add and remove divs with Jquery or JS

I'm making a site with video backgrounds that are preloaded so all my content needs to be on the same page. I have a div with my first section in it as "slide1" for example. I need to remove this div and replace it with "slide2" on a button click. I've tried using javascript to load "slide2"s html in on the click but the code I've tried just writes the div to a white page with no styling. I need it to be loaded inside my content div with the appropriate stylings in place.
my html code:
<script src="assets/js/introduction.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="slide1">
<p>Here is the first trigger. It should look something like this</p>
<p><input type="button" onclick="part2()" value="Click Me!" /></p>
</div>
</div>
the javascript file with the content:
function part2() {
document.write('\
<div id="slide2">\
<p>Here is the second trigger. It should be to the left</p>\
<p>next line goes here</p>\
</div>'
);
}
I've been stuck on this for days and it's driving me insane. Any help would be great

Why don't you just create all the slides in the html and hide all of them except slide 1?
Then when they click the button hide slide 1 and show slide 2. Something like this
<div id="content">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
Next
JS
$(function(){
var currentSlide = 0;
$(".slide").hide();
$(".slide:eq(0)").show();
$("#next-button").on("click",function(e){
e.preventDefault();
$(".slide:eq(" + currentSlide + ")").hide();
if(currentSlide == $(".slide").length - 1){
currentSlide = 0;
}else{
currentSlide++;
}
$(".slide:eq("+ currentSlide +")").show();
});
});
http://jsfiddle.net/cNTgQ/1/

If you are okay with JQuery try using .replaceWith()
See the official page for more info.

you can use this:
function part2() {
var html = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
//here you append the slide2;
$('#content').append(html);
//here you remove it
$('#slide1').remove();
}

Like the other guy said, try using replaceWith() from jQuery, here's your function:
function part2() {
var content = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
$('#slide1').hide().replaceWith(content).show();
}

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.

Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).

You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});

How to replace one div with another when clicking the html hyperlink [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Replace Div with another Div
Hi,
I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..

Something like this might help you:
//Using jQuery Change div attribute "id" on click:
$('#link_1_id').click(function(){
$('#img').attr('id','img2');
});
Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:
HTML:
Press me
Press me
<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>
Jquery:
$(document).ready(function(){
// Hide div 2 by default
$('#div_2').hide();
$('#link_2').click(function(){
$('#div_1').hide();
$('#div_2').show();
});
$('#link_1').click(function(){
$('#div_2').hide();
$('#div_1').show();
});
});
To add sliding effects take a look at .slideDown() or slideUp().
http://api.jquery.com/slideDown/

Try this:
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
in html
Menu 1
Menu 2
<div id="img">
//--- div content
</div>
<div id="img2">
//--- div content
</div>
in js:
function changeDiv(i){
if(i==1)
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
else
document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}

Try this:
HTML:
<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>
<div class="main" style="width:170px;height:170px;border:1px solid #000;overflow:hidden;padding:10px;position:relative;left:0;top:50px">
<div class="wrapper" style="width:350px;position:absolute">
<img src="image/Example.jpg" class="image_1 image" style="margin:10px;display:inline;height:150px; width:150px"/>
<img src="image/pr_4.jpg" class="image_2 image" style="margin:10px;display:inline;height:150px; width:150px"/>
</div>
</div>
JQUERY:
$('.link_1').click(function(){
$('.wrapper').animate({'left':'-170px'},'linear');
});
$('.link_2').click(function(){
$('.wrapper').animate({'left':'10px'},'linear');
});