I am using slideUp / down to show and hide content and have written it to that it will close any visible content when opening another one. This works until I try to close content by clicking on it, it opens it again straight away.
The HTML
<ul class="contents">
<li>
while($results->fetch()){
<div class="details">text</div>
<div class="more_details">more text</div>
}
</li>
</ul>
The jQuery
$("#results").on("click", ".details", function() {
$(".open").slideUp(600, function() {
$(".open").css("display", "none").removeClass("open");
});
if ($(this).hasClass("open")) {
$(this).slideUp( 600, function() {
$(this).css("display", "none").removeClass("open");
});
} else {
$(this).next(".more_details").slideDown(600, function() {
$(this).css("display", "show").addClass("open");
});
}
});
In the slide down code you are working with the next sibling more_details, where in the slide up code you are dealing with this element.
$("#results").on("click", ".details", function() {
var $details = $(this).next(".more_details");
$details.slideToggle(600, function() {
$details.toggleClass("open");
});
$(".more_details.open").not($details).slideUp(600, function() {
$(this).removeClass("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
</div>
Related
I am using a jquery function for toggle effect for an icon so when I click on that icon the div will move to left and hide.. so only the icon will show on the page and when I click on that icon again the div will appear sliding from left I am able to achieve the function but the following function
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x"></i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for any replies in advance.
Just found out that you did not add the class active while pageload but yet displaying the div.
Change the below line
<div class="demo_changer" style="padding-top:13px">
as
<div class="demo_changer active" style="padding-top:13px">
While loading, your webpage shows the div but does not have the class active in the div tag
and while clicking for the first time, as per your script, it finds out that there is no active class in the tag and then adds the class active and your div is already visible... I hope you understood..
The issue may be that, the margin in <div class="row"> is overlapping the icon div, it might be a reason why clicking on that area does not trigger "click" event -- See image below
Try Adding css style as mentioned in image below -
You need to use position: absolute; or position: relative; for the .demo_changer class so that you can animate its position.
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
.demo_changer {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x">icon</i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
You need too extra styles for animation block .
.demo_changer {
position:relative
}
Here is working example.
https://jsbin.com/xikamitole/1/edit?html,css,js,output
Hope this helps.
Try This:
$(document).on('click', '.demo-icon', function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
So I make this little kind of game. There are 7 switches that trigger other buttons on click to toggleClass 'on' which is defined in jQuery.
The Goal is to get all buttons to the state 'on'.
The problem is, you can easily right-click, choose Inspect Element, add the class 'on' and win the game.
So I need to make the classes for these switches random. E.g. 'on-214124712', 'on-307153821369' or 'on-6471649031264'. But they have to share the same prefix which is 'on-'.
How can I generate them differently with every click? And how can I still toggleClass and check hasClass them using regex?
HTML:
<h2>You clicked <span id="output">0</span> times</h2>
<div class="switches">
<div id="switch1" class="switch"></div>
<div id="switch2" class="switch on"></div>
<div id="switch3" class="switch on"></div>
<div id="switch4" class="switch"></div>
<div id="switch5" class="switch on"></div>
<div id="switch6" class="switch on"></div>
<div id="switch7" class="switch"></div>
</div>
Javascript:
var count = 0;
$('.switch').click(function () {
$('#output').html(function (i, val) {
return val * 1 + 1
});
});
$("#switch1").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch5').toggleClass("on");
$('#switch6').toggleClass("on");
count++;
});
$("#switch2").bind("click", function () {
$(this).toggleClass("on");
$('#switch1').toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch7').toggleClass("on");
count++;
});
$("#switch3").bind("click", function () {
$(this).toggleClass("on");
$('#switch2').toggleClass("on");
$('#switch5').toggleClass("on");
count++;
});
$("#switch4").bind("click", function () {
$(this).toggleClass("on");
//$('#switch1').toggleClass("on");
$('#switch2').toggleClass("on");
$('#switch5').toggleClass("on");
count++;
});
$("#switch5").bind("click", function () {
$(this).toggleClass("on");
$('#switch1').toggleClass("on");
$('#switch4').toggleClass("on");
count++;
});
$("#switch6").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch5').toggleClass("on");
$('#switch7').toggleClass("on");
count++;
});
$("#switch7").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch4').toggleClass("on");
count++;
});
$('.switches').click(function () {
if ($("#switch1").hasClass("on") && $("#switch2").hasClass("on") && $("#switch3").hasClass("on") && $("#switch4").hasClass("on") && $("#switch5").hasClass("on") && $("#switch6").hasClass("on") && $("#switch7").hasClass("on")) {
alert('Success!');
}
});
Thanks!
UPDATE
You can use this selector that checks if the element has a class that contains the desired string (check the updated demo):
$('.switch[class*=on-]').addClass('red');
Each div that has a class that contains on will get red
$('.switch[class*=on-]').addClass('red');
.red { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="switches">
<div id="switch1" class="switch">test</div>
<div id="switch2" class="switch on-9876597856978">test</div>
<div id="switch3" class="switch on-jhg675">test</div>
<div id="switch4" class="switch">test</div>
<div id="switch5" class="switch on-876uyg">test</div>
<div id="switch6" class="switch on-kjhg76gt9">test</div>
<div id="switch7" class="switch">test</div>
</div>
How can I show #b1 when clicked on #a1, and show #b2 when clicked on #a2? I need them to close as well (if you click, it will show and if you click again it will close). If you can add transition even better.
<div class="wrap">
<ul class="head_dd">
<li id="a1">INTERIOR</li>
<li id="a2">EXTERIOR</li>
</ul>
</div>
<div class="bt1int" id="b1" style="display: none;"></div>
<div class="bt1int" id="b2" style="display: none;"></div>
The easiest way to do this would be to attach event listeners to each of the elements and then use the .fadeToggle() method to show/hide the corresponding element.
Example Here
$('#a1').on('click', function () {
$('#b1').fadeToggle();
});
$('#a2').on('click', function () {
$('#b2').fadeToggle();
});
Since this could get relatively redundant, you could simplify it to the following:
Example Here
var mapping = {
'a1': 'b1',
'a2': 'b2'
}
$('.head_dd [id]').on('click', function () {
$('#' + mapping[this.id]).fadeToggle();
});
Without jQuery:
You could also use plain JavaScript and CSS3 transitions:
var mapping = {
'a1': 'b1',
'a2': 'b2'
}
Array.prototype.forEach.call(document.querySelectorAll('.head_dd [id]'), function (el) {
el.addEventListener('click', function () {
document.getElementById(mapping[this.id]).classList.toggle('visible');
});
});
.bt1int {
opacity: 0;
transition: opacity 1s;
}
.visible {
opacity: 1;
}
<div class="wrap">
<ul class="head_dd">
<li id="a1">a1</li>
<li id="a2">a2</li>
</ul>
</div>
<div class="bt1int" id="b1">b1</div>
<div class="bt1int" id="b2">b2</div>
Try this one.
HTML code should put data on div content to differ between them.
<div class="wrap">
<ul class="head_dd">
<li id="a1">INTERIOR</li>
<li id="a2">EXTERIOR</li>
</ul>
</div>
<div class="bt1int" id="b1" style="display: none;">a</div>
<div class="bt1int" id="b2" style="display: none;">b</div>
JS code(place this on head section or bottom of body)
<script>
$(function(){
$('#a1').on('click',function(){
$('#b2').hide();
$('#b1').show();
});
$('#a2').on('click',function(){
$('#b1').hide();
$('#b2').show();
});
});
</script>
Add name attribute of each li as target div id
<ul class="head_dd">
<li id="a1" name="b1" >INTERIOR</li>
<li id="a2" name="b2" >EXTERIOR</li>
</ul>
then add following js
$(".head_dd li").click(function(e){
var targetId = $(this).attr("name");
if($("#"+targetId).is(':visible')){
$("#"+targetId).hide();
}else{
$("#"+targetId).show();
}
});
Attach event listeners to to the elements.
var a1 = $('#a1');
var a2 = $('#a2');
var b1 = $('#b1');
var b2 = $('#b2');
a1.addEventListener('click', function(){
b1.slideToggle(600);
});
a2.addEventListener('click', function(){
b2.slideToggle(600);
});
or the alternate
$('#a1').on( 'click', function(){
$('#b1').slideToggle(600);
});
$('#a2').on( 'click', function(){
$('#b2').slideToggle(600);
});
I want to toggle a div open, load a page into that div, then be able to toggle it closed.
I want to do this with multiple links.
<div id="main-nav">
<div id="menu-container">
<div id="menu">
<ul>
<li></li>
<li id="clicklink">mission</li>
<li>leadership</li>
<li>awards</li>
<li>sustainability</li>
<li>faq</li>
</ul>
</div>
<div id="clickme3">
<img src="images/logo-sm.png">
</div>
</div>
<div id="content-load">
</div>
</div>
$("#clicklink").toggle(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
function () {
$("#main-nav").animate({
height: "40",
}, 1000, )
};
});
});
This is what I have that isn't working.
I can get this to work, but of course does not toggle.
$("#clicklink").click(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
});
});
I'm new to jQuery but eager to learn. Is there a way that I can get this to toggle?
You can view production here http://billygoforth/learning/CMD
You can see that it shifts the bottom navigation up (which is what I want) and loads the external page content below (also what I want), but I want to have it so if the link is clicked again, it collapses and then I can put this jquery on the other link IDs.
Again, many thanks!
Try this way:
// global variable
var toggleHeight = $('#main-nav').height();
$("#clicklink").click(function () {
if(toggleHeight <= 0){
$("#main-nav").animate({
height: "300px",
}, 1000, function () {
$("#content-load").load("contentpage.html");
});
}
else{
$("#main-nav").animate({
height: "0px",
}, 1000, function () { });
}
});
This is how I would solve this:
The plnkr http://plnkr.co/edit/PcE2hxY4q98Trw90ztnL?p=preview
HTML:
<div class="view" data-page="contentPage.html">
<div class="actions">
<label><input type="checkbox"> Toggle View</label>
</div>
<div class="content"></div>
</div>
<div class="view" data-page="other.html">
<div class="actions">
<label><input type="checkbox"> Toggle View</label>
</div>
<div class="content"></div>
</div>
Javascript:
$(function() {
$(".view").each(function(){
var page = $(this).data("page")
$(this).find(".content").load(page, function(){
$(this).animate({height: 40});
});
})
$(".actions input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().siblings(".content").animate({height: 300});
}else
{
$(this).parent().parent().siblings(".content").animate({height: 40});
}
});
});
How can a get the number by hovering mouse over the div?
HTML
<div id="log"></div>
<div id="myList">
<div class="divHV">One </div>
<div class="divHV">Two</div>
<div class="divHV">3 </div>
<div class="divHV">Blub </div>
<div class="divHV">Peter</div>
<div class="divHV">6 House</div>
<div class="divHV">last one is 7</div>
</div>
JS
$(document).ready(function() {
$('.divHV').hover(function()
{
XX = '';
$('#log').html('This is the div number '+XX+' <br />');
}, function ()
{
$('#log').html('');
});
});
Working exmaple
http://jsfiddle.net/9R4aC/2/
XX = $(this).index();
but that will start from 0 you can add +1 if you want..
http://jsfiddle.net/9R4aC/2/
$(document).ready(function() {
$('.divHV').each(function(i) {
$(this).hover(function() {
XX = i;
$('#log').html('This is the div number ' + XX + ' <br />');
}, function() {
$('#log').html('');
});
});
});
http://jsfiddle.net/9R4aC/3/