Develop Reference

Using javascript append to move multiple divs

I have a wordpress plugin that creates a slider in a output order like this:
<ul>
<li>
<img src="">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title">
<div class="wp1s-caption-content">
</li>
<!-- each slide as this same setup within the li, currently I have three slide so therefore 3 sets of the above li-->
</ul>
Now what I need to do is enter a div (hh-caption) into the div class wp1s-caption-wrapper and then insert wp1s-caption-title and wp1s-caption-content inside that. To do this I though to use append like so:
var j = jQuery.noConflict();
j(document).ready(function(){
j(".wp1s-caption-wrapper").append(j(".hh-caption"));
j(".hh-caption").append(j(".wp1s-caption-title"));
j(".hh-caption").append(j(".wp1s-caption-content"));
});
Now this enters the div hh-caption into each of the wp1s-caption-wrapper divs, but it places every wp1s-caption-title and wp1s-caption-content that appears. I have three sliders with title and captions so what happens is each hh-wrapper contains 3 titles and captions. I only want the title and content directly above each hh-caption (append puts hh-caption below title and content) to move into it not all occurences.
I don't want to edit the plugins codedirectly as any updates would most likely require me to redo everything, I though doing it with javascript in my own pages would be easier to alter if updates changed anything.
Does anyone have any suggestions or point me in the right direction?

I have not really understood what you are trying to do but to my understanding I will ask you to try appendTo instead of append
var j = jQuery.noConflict();
j(document).ready(function(){
j(j('.hh-caption').appendTo('.wp1s-caption-wrapper');
j(j('.wp1s-caption-title').appendTo('.hh-caption');
});

If I understand the question correctly, I think your issue is you are selecting all the elements and then appending your new content. You need to specify the exact element you want to append to. Usually I would say use an id but I understand you don't want to change the existing code so instead you can do 2 things:
One Append: Append everything in one go, I prefer this as its less code, but depending on how complex the html is your adding, this may not be suited.
Multiple Append: Append the caption wrapper, then within that the title etc. This assumes you are always adding it to the end and uses jquery .last()
I hope this helps, sorry its a bit lengthy but wanted to demonstrate it well.
$("#addCaption1").click(function() {
captionImage = "https://images.unsplash.com/photo-1473182446278-fa0683411d10?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=";
captionTitle = "This is a new caption";
captionContent = "This caption was added via jquery.";
addCaption1(captionImage, captionTitle, captionContent);
});
$("#addCaption2").click(function() {
captionImage = "https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=compress,format&fit=crop&w=1199&h=791&q=80&cs=tinysrgb&crop=";
captionTitle = "This is a new caption";
captionContent = "This caption was added via jquery.";
addCaption2(captionImage, captionTitle, captionContent);
});
function addCaption1(imgUrl, title, content) {
var caption = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"><div class="wp1s-caption-title"><strong>' + title + '</strong><div class="wp1s-caption-content"><p>' + content + '</p></div></div></div></li>';
$("#sidebar").append(caption);
}
function addCaption2(imgUrl, title, content) {
var captionWrapper = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"></div></li>';
$("#sidebar").append(captionWrapper);
$(".wp1s-caption-wrapper").last().append('<div class="wp1s-caption-title"><strong>' + title + '</strong></div>');
$(".wp1s-caption-wrapper").last().find(".wp1s-caption-title").append('<div class="wp1s-caption-content"><p>' + content + '</p>');
}
button {
padding: 5px;
}
ul {
list-style: none;
}
li {
margin: 5px;
padding: 5px;
background: #ccc;
color: #333;
width: 180px;
display: inline-block;
}
li img {
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addCaption1">One append</button>
<button id="addCaption2">Multiple appends</button>
<ul id="sidebar">
<!-- Item 1 -->
<li>
<img src="https://images.unsplash.com/photo-1473220464492-452fb02e6221?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 1</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 1</p>
</div>
</div>
</div>
</li>
<!-- Item 2 -->
<li>
<img src="https://images.unsplash.com/photo-1467791702337-32e58d17bb6d?dpr=1&auto=compress,format&fit=crop&w=1199&h=796&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 2</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 2</p>
</div>
</div>
</div>
</li>
<!-- Item 3 -->
<li>
<img src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 3</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 3</p>
</div>
</div>
</div>
</li>
</ul>
I recommend running in full page.

How to show and hide the particular div, when we click on particular link on that div?

Node: Please see the demo
All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
Please see the following figure, If I click on show content on 1st div then It will show rest of 1st div on other will not show, If I click on 2nd div then It will show the rest 2nd div, no other div will show.
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2

Try this piece of code . I think this is what you want to achieve .
$(document).ready(function() {
$('.bucket .restPart').hide();
$('.more').show();
$('.less').hide();
$('.more').click(function() {
$('.more').toggle() ;
$(this).parent().next('.restPart').show();
$('.less').toggle() ;
});
$('.less').click(function() {
$('.less').toggle() ;
$(this).parents('.restPart').hide();
$('.more').toggle();
});
});

You can achieve this effect using straightforward Javascript (rather than jQuery).
function showRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'block';
}
function hideRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
}
function initialiseRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
var showMore = document.getElementById('showMore');
showMore.addEventListener('click',showRestPart,false);
var showLess = document.getElementById('showLess');
showLess.addEventListener('click',hideRestPart,false);
}
window.onload = initialiseRestPart();
<div class="bucket">
... Content of visible part of bucket...
Show More.
<div id="restPart">
... Content of Rest Part...
Show Less.
</div>
</div>

I think your problem is with the Ids.
In a file, two elements shouldn't have the same id.
Apart from that your code seems fine, (more or less).
$(document).ready(function() {
$(".restPart").hide();
$('#grid_content').on('click', '.more', function() {
$(this).nextAll(".restPart:first").show();
});
$('#grid_content').on('click', '.less', function() {
$(this).closest("div").hide();
});
});
and the HTML :
<section id="grid_content">
<!--1st div generated by dynamically -->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--2nd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--3rd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
</section>

How do I simulate a multi page site using jQuery?

The site I am working on is a single page site but I want to simulate a multipage site using css/jQuery to hide/reveal the different sections of the site when the correct link is clicked in the nav.
Here is the code I am currently working with on JSFiddle.
HTML
<header id="top">
<nav>
<ul>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<section id="about">
</section>
<section id="skills">
</section>
<section id="projects">
</section>
<section id="contact">
</section>
</main>
CSS
.active {
background: $lightest-blue;
color: $blue;
}
.hide-section {
display: none;
}
section {
height: 1em;
background: blue;
}
JavaScript
// Create Variables pointing to all Nav links and the About section link.
var siteNav = $("#top li").children();
var aboutLink = siteNav[0];
// Create Variables poingting to all Sections and the About section.
var siteSections = $("#main").children();
var aboutSection = siteSections[0];
// Hide all major sections by adding CSS class.
siteSections.addClass("hide-section");
// Upon document being ready, make user "arrive" at the About section by removing the hide class on it.
// Add active class to About section link.
$(function() {
$(aboutLink).addClass("active");
$(aboutSection).removeClass("hide-section");
});
// 1. Capture click on Nav anchor.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
siteSections.addClass("hide-section");
// 1.5 Reveal proper section.
});

Right hold up, you're trying to reinvent the wheel here! :)
Have a look at the Jquery tabs library:
http://jqueryui.com/tabs/
Just copy the code into your site,
remove the style sheet link and away you go! :D

Use this javascript to toggle between screens. I added some css so you can see the different sections come and go.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
$('#'+siteSections[0].id).hide();
$('#'+siteSections[1].id).hide();
$('#'+siteSections[2].id).hide();
$('#'+siteSections[3].id).hide();
// 1.5 Reveal proper section.
$(hrefLink).show();
});
and some css
section{
background:red;
}
#about{
background-color:blue;
}
#skills{
background-color:yellow;
}

Multiple navigations and pages on a single page

<html>
<head>
<style type='text/css'>
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
</style>
<script>
// show the given page, hide the rest
function show(elementID) {
// try to find the requested page and alert if it's not found
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div style="float: left; width: 20%;">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
<button>Link 1</button>
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
<button>Link 2</button>
</p>
</div>
</div>
</div>
<div style="float: right; width: 75%;">
<div>
<p>
Show page
<span onclick="show('Page1');">1</span>,
<span onclick="show('Page2');">2</span>,
<span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
</div>
</div>
</body>
</html>
Above is the code that I have so far.
Right now, when clicking on page 1, page 2, or page 3, the desire page will appear below. This code is set up on the right side of the page. <div style="float: right; width: 75%;">
On the left side of the page <div style="float: left; width: 20%;">, i have an accordion with a couple button links. My question is when clicking on button link 1 or button link 2 in the accordion, how can I switch the right page from a selection of different pages keeping the same function it has right now.
Thus, first i would click on button link 1 in the accordion to show desired page on the right side and if i would like to switch pages, then i would click on button link 2 in the accordion and show that desired page.
For visual, please see this fiddle
If you saw the fiddle, then the links inside of the black box switch pages within the div, but I would like to add another function and switch the black boxes depending if the user presses button link 1 or button link 2
Any suggestions? thanks!

I am not certain that I understand the question correctly.
What I believe could be very useful for you, is to look into jQuery UI Tabs:
http://jqueryui.com/tabs/
and link the tab click events to the accordion menu.
Edit:
JSFiddle, including the jQuery UI tabs.
Provided the code on how you can activate the tabs on a click event from the accordion menu.
http://jsfiddle.net/kimgysen/BcCnL/2/
$(document).ready(function() {
//Tabs
$('#body_div').tabs();
$('#newsfeed').click(function(){
$("#body_div").tabs("option", "active", 0);
});
$('#myprofile_edit').click(function(){
$("#body_div").tabs("option", "active", 1);
});
$('#myprofile_view').click(function(){
$("#body_div").tabs("option", "active", 2);
});
});

javascript code to make a div slide down and up (show/hide)

I have a page and I have little question mark images next to sections where if the question mark image is clicked, a div right below the section will appear sliding the rest of the page down. Essentially a slide down/slide up javascript function.
Ex:
Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>
In my example above, the content inside div section and div section2 is hidden at first, but when the ? IMG is clicked for that section, the content will reveal itself and the rest of the page will slide down at the same time to make room for the content inside the divs. And on reverse, if the question mark image is clicked while content is shown, it will slide up and hide itself and the page below will slide up as well filling the gap.
How would I write this? I need it expandable so I can add multiple div's which can be titled accordingly and expanded individually.
Thanks

With jQuery you can do this:
HTML:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
Script:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Source: jQuery docs http://api.jquery.com/slideDown/
To include jQuery on a HTML page, you can use the following in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You could also download it yourself at place it on the server you want.
EDIT: Full answer with ready code then....
HTML:
<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>
SCRIPT
$('.clickme').click(function() {
$(this).next().slideToggle('slow', function() {
// Animation complete.
});
});

Try this for instance:-
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
</div>
<script>
$(function(){
$('.btn').click(function(e){
$(this).parent().toggleClass('slideOut');
});
});
</script>
.section{
display:none;
}
.slideOut .section{
display:block;
}
.btn
{
cursor:pointer;
}