Add and remove divs with Jquery or JS - javascript

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();
}

Related

How to show a specific section from a link that is hidden

I have multiple links that go to the same page, however I want different sections of that page to show (preferably at the top of the page). The issue is, those sections are hidden on page load and so is the container they are in. I solved how to get the container to show, but it shows all of the different sections when I only want the one I clicked on, from the link, to show. ie:
I have these links:
Service 1
Service 2
Service 3
Then on the serviceCheck1 page I have this HTML:
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
<div class="service-item-box" id="service2">
<div class="service-item-title">Service 2</div>
</div>
<div class="service-item-box" id="service3">
<div class="service-item-title">Service 3</div>
</div>
<div class="service-item-box" id="service4">
<div class="service-item-title">Service 4</div>
</div>
<div class="service-item-box" id="service5">
<div class="service-item-title">Service 5</div>
</div>
<div class="service-item-box" id="service6">
<div class="service-item-title">Service 6</div>
</div>
</div>
</div>
If I would click on the link that says, Service 2, I would want the service-display-box to show and then the #service2 div to show, then all of its siblings to not show.
Here is my javascript:
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
//$('#' + sectionName ).show();
$('#service' + sectionName).show().siblings().hide();
})
/*var index = location.hash.indexOf('#service');
if(index > -1) {
var serviceId = parseInt(location.hash.substring(index));
if(serviceId) {
$('#service-display-box').show();
$('#service' + serviceId).show().siblings().hide();
}
}*/
It appears as though your selector for the section is not formed correctly. Essentially this happens:
You click on Service 1
The serviceCheck1 page loads.
This line runs: var sectionName = window.location.hash.slice(1);
sectionName now contains "service1"
This line runs: $('#service' + sectionName).show().siblings().hide();
This evaluates to $('#serviceservice1').show().siblings().hide();
The browser can't find an element with the id serviceservice1
Nothing happens :)
Instead, since window.location.hash contains #service1 already, just run the following:
$(window.location.hash).show().siblings().hide();
Which will find the appropriate element, show it, and hide its siblings.
You could try using CSS to control the visibility, and simply toggle a class with your JS.
JS:
$('#service-display-box').addClass('visible');// Make the wrapper visible
$('#service-item-box').removeClass('visible');// Double-check all the other boxes are still hidden
$('#service' + sectionName).addClass('visible');// Make the target box visible
CSS:
#service-display-box,
#service-item-box{
display:none;
}
#service-item-box.visible,
#service-item-box.visible{
display:block;
}

Collapsible container/column. Adding more than one link

I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});

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/

onClick image, display div content

I am very new to javascript but i wanted to know how to do something in it. Basically i have 3 image buttons. I want to know how i can make it so when you click the first button a div shows up, then when you click the next button the div that is present disappears and the next div shows up for button two in its place. By divs i mean any content that i put inside of it. Just like the tabs on a website, when you click one you get a page. Then when you click the next tab the previous page disappears and the next page is shown. Instead of pages these would be divs.
Any advice would be greatly appreciated.
Here is the simple solution for hide and show related div's
Check the link for solution : http://jsfiddle.net/silpa/rny2wb5z/34/
HTML:
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId1"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId2"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId3"/>
<div id="divId1" class="hideDivs">Div 1</div>
<div id="divId2" class="hideDivs">Div 2</div>
<div id="divId3" class="hideDivs">Div 3</div>
jQuery:
$("img").on('click',function(){
var hello = $(this).attr('data-id');
$('.hideDivs').hide();
$('#'+hello).show();
});
CSS:
.hideDivs{
display:none;
}
Assign IDs to the divs, then set their visibility with a function. You can call this function with the onClick attribute of the image button.
Javascript:
function changePage(newPageId) {
//hide all pages
document.getElementsByClassName("selectablePages").style.display = 'none';
//show page we want to see
document.getElementById(newPageId).style.display = 'block';
}
Html:
<img src="p1.gif" alt="page1" onclick="changePage('page1')" />
<img src="p2.gif" alt="page2" onclick="changePage('page2')" />
<img src="p3.gif" alt="page3" onclick="changePage('page3')" />
<div id="page1" class="selectablePage">asdasdasd</div>
<div id="page2" class="selectablePage">jghjghjghj</div>
<div id="page3" class="selectablePage">utytyutyuty</div>
Check Fiddle
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId1"/>
<div id="divId1" class="hideDivs">Div 1</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId2"/>
<div id="divId2" class="hideDivs">Div 2</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId3"/>
<div id="divId3" class="hideDivs">Div 3</div>
//jQuery
$("#imgId1").click(function(){
$("#divId2").hide();
$("#divId3").hide();
$("#divId1").show();
});
$("#imgId2").click(function(){
$("#divId1").hide();
$("#divId3").hide();
$("#divId2").show();
});
$("#imgId3").click(function(){
$("#divId1").hide();
$("#divId2").hide();
$("#divId3").show();
});

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

Categories