So, I'm making it where their is some buttons, and when one is clicked it makes the hidden DIV with contents unhide, this is what I have:
HTML
<div id="disArea"> <!--The toggled Dac diplays in this area.-->
<div class="Dac 1">
<p>Dac 1/p>
</div>
<div class="Dac 2">
<p>Dac 2/p>
</div>
<div class="Dac 3">
<p>Dac 3/p>
</div>
<div class="Dac 4">
<p>Dac 4/p>
</div>
<div class="Dac 5">
<p>Dac 5/p>
</div>
</div>
<div class="ibox" onclick="disToggle('.1')">Button 1 (Displays the Dac 1)</div>
<div class="ibox" onclick="disToggle('.2')">Button 2 (Displays the Dac 2)</div>
<div class="ibox" onclick="disToggle('.3')">Button 3 (Displays the Dac 3)</div>
<div class="ibox" onclick="disToggle('.4')">Button 4 (Displays the Dac 4)</div>
<div class="ibox" onclick="disToggle('.5')">Button 5 (Displays the Dac 5)</div>
Please remember that the div's with the class of "Dac" are hidden until jQuery executes the following (well, that is what I want to do, but it doesn't):
jQuery / JavaScript
function disToggle(DacNumClass)
{
$("ibox").click(function()
{
$(DacNumClass).toggle();
});
}
I've done this by using a JavaScript function with a argument, the argument calls out the Id, or class that I need to .toggle(). This could be the complete wrong idea, correct me if I am wrong. How this works is ever Dac has a number class along with it, and the function argument is the class e.g. divToggle()
And I have lastly my CSS, not sure if this important at all, but here it is:
CSS
#disArea {
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background: green;
}
.Dac {
display: none;
}
.ibox {
background: red;
display: block;
width: 125px;
height: 125px;
margin: 5px;
}
It doesn't seem to be toggling? what have I done wrong?
jsFiddle Example
EDIT
*Fixed link with the /p> instead of </p>
Also, is it possible to have only one Dac Div open at a time?
Since disToggle itself is a click handler you should just toggle the target element inside the method.
Also since the method disToggle is used as a inlined handler it should be added to the global scope, by default jsfiddle will add the given script in window.onload=function(){...} wrapper which will make the disToggle method a private one to the onload handler. You need to select No Wrap - Body/Head in Left Side Panel -> Second Dropdown
function disToggle(DacNumClass) {
$('.Dac').not(DacNumClass).hide()
$(DacNumClass).toggle();
}
Demo: Fiddle
A more jQuery-ish solution
<div class="ibox" data-target=".1">Button 1 (Displays the Dac 1)</div>
<div class="ibox" data-target=".2">Button 2 (Displays the Dac 2)</div>
<div class="ibox" data-target=".3">Button 3 (Displays the Dac 3)</div>
<div class="ibox" data-target=".4">Button 4 (Displays the Dac 4)</div>
<div class="ibox" data-target=".5">Button 5 (Displays the Dac 5)</div>
then
jQuery(function ($) {
var $dacs = $('.Dac');
$('.ibox').click(function () {
var target = $(this).data('target');
$dacs.not(target).hide();
$(target).toggle();
})
})
Demo: Fiddle
Related
I have list and each list has "move top" button.
when click "move top" button, div element shoul be move to top(in DOM).
But I am getting little trouble to make it.
Also when using keyboard tabbing to the button and press enter key, the focus has to be keep to the button, after press the keyboard enter.
This is what I tried so far here
Please help.
$('.btnTop').on('click', function() {
$(this).parent().prepend(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
You are prepending the wrong item. You need to prepend the parent div of the button, not the button itself. Also, you need to prepend to the .wrap div, which is the button's parent parent rather than to the button's parent which is just the div wrapping the button.
Lastly, you need to focus() on this (which is the button you clicked) to get the tab button working. At the moment you are not focusing on the button you clicked on.
See working example below:
$('.btnTop').on('click', function() {
let this_div = $(this).parent();
this_div.parent().prepend(this_div);
$(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/
I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');
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>
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
As noted by others, remove duplicate IDs.
Judging by your image,
your button Show more, (once clicked - reveals the content and) becomes: Show less so...
change button text (So use a single toggle button!)
toggle/slide the previous DIV
$(function() { // DOM is now ready
$("#grid_content").on("click", ".toggle", function(evt) {
evt.preventDefault(); // Prevent window following #hash / jump
var more = $(this).text() === "Show More";
$(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
});
});
.bucket {
width: 290px;
float: left;
margin: 0 0 48px 20px;
border: 1px solid #262626;
background: lightgray;
}
.restPart{
overflow:auto;
display:none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="grid_content">
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
</section>
First of all - your naming strategy is a bit wrong. HTML document can contain (by standards) only one object with one ID - that's the purpose of ID as such. So, you can't have many objects with id="showRest" or id="restPart" or id="showless".
Possible solution for your problem.
Design your HTML something like
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 1...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 1 of everything</div>
Show less
</div>
</div>
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 2...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 2 of everything</div>
Show less
</div>
</div>
Next, in JavaScript part you can use selectors such as:
$(".bucket .showmore").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').hide();
$bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').show();
$bucket.find('.maxinfo').hide();
});
Updated 1: added two buckets to example.
Updated 2: example in JSFiddle
Updated 3: update in JSFiddle with some content kept
I've been looking around for a while but I'm afraid I'm too begginer for this easy jquery.
I´ve tried show/hide and toggle functions but I don´t find the way to show toggle elements in a page hidding the others. The toggle works, but when I click one I'd like the others to be hidden and I don't find the way. Maybe It's too easy, but I can't find the answer.
This is my jquery
function toggleDiv(divId) { $("#"+divId).toggle();}
And this is the html sample
Toggle Button 1
<div id="div1">
<p>paragraph 1</p>
</div>
Toggle Button 1
<div id="div2">
<p>paragraph 2</p>
</div>
I´ve just created a fiddle that explains better what I mean: http://jsfiddle.net/vKLNe/
Thanks in advance for your help and sorry about my english.
You need to add class="toggle" to all the divs that toggle and then
http://jsfiddle.net/vKLNe/5/
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.toggle').not($("#"+divId)).hide();
}
Shoot someone beat me to it... but yeah you can use toggle or show because you are manipulating multiple divs before you show the current clicked div...
function toggleDiv(divId) {
$('div').hide();
$("#"+divId).toggle();
}
The only downfall is that if you decide to have different divs doing different things, it could cause issues with them.
Although there are ways to do that on your own like Freddy's and Adam's, you can always rely on some kind of pre-defined accordion like jquery ui's
http://jqueryui.com/accordion/
Or bootstrap's collapse
http://getbootstrap.com/javascript/#collapse
And you wouldn't have to worry about handling the events yourself
You can do this by css classes.
Demo : http://jsfiddle.net/vKLNe/4/
Use hide and show classes
and only one div at a time will have show class.
html:
Toggle Button 1
<div class="hide" id="div1" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 1</p>
</div>
<br /><br />
Toggle Button 2
<div class="hide" id="div2" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 2</p>
</div>
<br /><br />
Toggle Button 3
<div class="hide" id="div3" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 3</p>
</div>
Jquery:
function toggleDiv(divId) {
$(".show").addClass('hide').removeClass('show');
$("#"+divId).addClass('show').removeClass('hide');
}
css:
.hide {
display: none;
}
.show {
display: block;
}
It is MUCH more practical to use event listeners compared to inline JS:
jQuery in
$(document).ready(function(){
// listen for clicking of the <a>
$('a').on('click', function(e){
// don't let the <a> perform it's default action
e.preventDefault();
// hide all divs
$('div').hide();
// show the <div> which is after the <a> which you clicked
$(this).next('div').show();
});
});
HTML
<!-- notice the <a> tags have an href="#", no more inline JS! -->
Toggle Button 1
<div id="div1" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 1</p>
</div>
<br />
<br />
Toggle Button 2
<div id="div2" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 2</p>
</div>
<br />
<br />
Toggle Button 3
<div id="div3" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 3</p>
</div>
Please not that this code ONLY works because you are not doing any animations such as fading or sliding. .hide() and .show() merely change the CSS the moment they are called upon where as .fadeIn() will alter the CSS potentially thousands of times over a specified period of milliseconds.
http://jsfiddle.net/vKLNe/8/
G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.