I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.
Related
I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))
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() {});
});
});
I have the following html generated by shortcodes generated by functions.php in a WordPress parent theme:
<div class="pricing-table-one left full-width ">
<div class="pricing-table-one-border left">
<div class="pricing-table-one-top pricing-table-green left" style="background:#95705b">
<span style="color:">Restaurant / Café</span>
<p style="color:"></p>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>ONTBIJT</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>LUNCH</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>BRUNCH</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>DINER</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>WEST-FRIESE KOFFIETAFEL</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>SALADESCHOTELS</h5>
</div>
<div class="pricing-table-one-center pricing-table-white left">
<h5>EN NOG VEEL MEER</h5>
</div>
<div class="color-buttons color-button-blue pricing-button">
Voor meer informatie – Email ons
</div>
</div>
</div>
I need to make one of the titles in a cell or the div containing it a link to a pdf. I read here that I can do this on an id with jQuery like so:
$("div").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
But his is only working when you change the html. I prefer a Jquery or JavaScript solution only. On CSS Tricks I found another snippet that may help
$(".myBox").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
I only would need to change the a element to div and the class to the class of the div. However, I need this done with a few specific divs (some items inside the table, but not all) and it only has one sort of useful class:
<div class="pricing-table-one-center pricing-table-white left"><h5>BRUNCH</h5></div>
Perhaps by focussing on parent div with class "pricing-table-one" and then the div inside it. But then I still need the nth div or h5 tag..
Is this possible to achieve creating a link of BRUNCH or other h5 tags with this exising HTML code with JavaScript or jQuery or will I have to change to PHP code server side?
I upvoted his answer but, here's a quick snippet of what I mean. This is assuming you have no control over the html.
$(function () {
// pdf urls and header names
var pdfUrls = {
'BRUNCH': 'http://domain.nl/wp-content/uploads/2015/02/09/x.pdf',
'DINER': 'http://domain.nl/wp-content/uploads/2015/02/09/y.pdf'
};
// loop through each h5 tag within pricing-table-one
$('.pricing-table-one h5').each(function (i, el) {
var header = $(el).text();
// if a header url is found
if (pdfUrls[header]) {
$(el).wrap('');
}
});
});
Here's a fiddle: http://jsfiddle.net/pbzvszxo/
I am not getting your question exactly.
But, I thinks you want to wrap the div with <a>- it will make your div as link -
You can do something like below code.
$(function(){
$( ".pricing-table-one-center" ).wrap( "<a href='#'></a>" );
});
.wrap() - The wrap() method wraps specified HTML element(s) around each selected element.
I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/
I am trying to toggle visibility on a div by clicking a button in a neighboring div. I'm using a class .expand to fire the onClick and another class .target as the target, but the problem is that every div with the .target class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: http://www.bootply.com/oSGM0jOG6q#.
$('.expand').on('click', function(e){
$(".target").toggleClass("hidden");
$(".target").toggleClass("visible");
});
HTML
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden">
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.
You can use .closest() to find parent div with class col-sm-4 then use .next() to find target
$('.expand').on('click', function(e){
$(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});
Try to use .closest() to get the static parent, i just meant static parent as .thumbnail, since col-sm-4 this class would get change depends upon the layout, i assume. So grab the closest .thumbnail and get its parent then target the next sibling to it.
$('.expand').on('click', function(e){
$(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});
DEMO
Here is your bootply http://www.bootply.com/gk8gtlaH1L
Add a div with a new Expand wrapping both the divs. It would be easy for you :)
JS CODE
$('.newExpand').on('click', function(e){
$(this).find(".target").toggleClass("hidden");
$(this).find(".target").toggleClass("visible");
});
HTML CODE
<div class="newExpand">
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden"><!-- use js to add/remove class"hidden" on button click -->
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
</div>
To use a declarative approach that doesn't tie the JavaScript too heavily to the DOM structure, you could set data-target on each button element to specify the target element to be toggled when the button is clicked, and update the click handler to find the element(s) identified.
For example:
$('.expand').on('click', function(e){
var sel = $(e.target).data("target");
if (sel) {
$(sel).toggleClass("hidden");
$(sel).toggleClass("visible");
}
});
And in the HTML:
<!-- Thumbnail -->
<div class="col-sm-4">
Expand
</div>
<!-- Big-Image -->
<div id="bigImage" class="hidden">
This div will be hidden/shown when the button is clicked
</div>