How to check if toggle function show item? - javascript

I have this code ...
<div class="btn1">Button</div>
<div class="text1">Some text</div>
...
$(document).ready(function(){
$(".btn1").click(function(){
$(".text1").toggle();
});
});
<div class="block2">Some text 2</div>
I want to hide ".block2" when toggle function show ".text1" and show ".block2" when ".text1" is hidden. How can I do that? I hope my question is clear. Thanks for answers.

1) see this http://jsfiddle.net/a6kqvLj8/
Just make the second block diaplay:none, and do the same operations
on it
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
$(".block2").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2" style='display:none;'>Some text 2</div>
2) Or if you want the both blocks to be visible at first, and the
start toggling on click, you can do this:
http://jsfiddle.net/a6kqvLj8/1/
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
if ($(".text1").css('display') == 'none') {
$(".block2").css('display', 'block');
} else {
$(".block2").css('display', 'none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2">Some text 2</div>

Related

Apply function onclick function on $(document).ready

I have 3 divs that fades sequentially on page load just like on this link:
http://jsfiddle.net/x4qjscgv/6/ However, I want the fade function to happen once the user clicked a button. I tried to use the function: document.getElementById but it does not appear to be working.
See full code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
document.getElementById('btn').onclick = function(e)
</script>
<style>
#chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button>
<div id="chat" class="word1">Word 1</div>
<div id="chat" class="word2">Word 2</div>
<div id="chat" class="word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
</html>
You can follow my example. But note, id is only one instance, and class can has many instances!
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btn").on('click', function(e){
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btnhide").on('click', function(e){
$('.chat').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
.chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button> <button id="btnhide"> hide divs</button>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
This line does select #btn, however it does not execute anything because the function declaration is incomplete:
document.getElementById('btn').onclick = function(e)
You must include the actions of the function like so:
document.getElementById('btn').onclick = function(e){
// add function within curly braces.
}
It's worth noting that the e is the Event object. Try adding console.log('test') and check the console (often accessed via right-click > "Inspect") for your messages.
The onclick function that you used indeed doesn't do anything, because you didn't wrapped your'e fade-in code by it. If you already using jquery, try using the click event handler, like so:
$(document).ready(function() {
$('#btn').click( function () {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
});
Modify your example:
<div id="chat1" class="word">Word 1</div>
<div id="chat2" class="word">Word 2</div>
<div id="chat3" class="word">Word 3</div>
.word {
display: none;
}
$(".word").click(function(e){
$(this).delay(10).fadeOut(1000);
});

Simplify JavaScript Accordion

I have got a script which works really well for creating accordions. The only issue is I have to create extra sections all the time to add a new one. Is there any way that it can be simplified to minimise the extra work and script?
$(document).ready(function(){
$(".accord-one").click(function(){
$(".accordoneContent").slideToggle("normal");
});
});
$(document).ready(function(){
$('.accord-two').click(function(){
$(this).next('.accordtwoContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-three').click(function(){
$(this).next('.accordthreeContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-four').click(function(){
$(this).next('.accordfourContent').slideToggle("normal");
return false;
});
});
What if you just remove the "numbers"?
$(document).ready(function() {
$(".accord").click(function() {
$(this).next(".accordContent").slideToggle("normal");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">button 1</div>
<div class="accordContent" style="display:none">content 1</div>
<div class="accord">button 2</div>
<div class="accordContent" style="display:none">content 2</div>
In your markup change all the accordion classes (accord-one, accord-two etc.) to just accord and then change all the content classes (accordoneContent, accordtwoContent etc.) to just accord-content. Then you just need this code for them all to work...
$(document).ready(function(){
$('.accord').click(function(){
$(this).next('.accord-content').slideToggle("normal");
return false;
});
});
That will attach the click event handler to each accordion element and look for the relative content to toggle.

Jquery attr change structure html

i have jquery in there i want to make my structure of my html change when i click my checkbox
for example :
when i checked my checkbox my .col-md-4 col-md-push-2 will change to .col-md-6
and when i uncheck it will back to normal
here my jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$(".col-md-4").attr("class", "col-md-6");
$(".col-md-push-2").attr("class", "");
});
});
</script>
and here my view :
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<input type="checkbox" id="try">
in there i can make it change if i check it, but i can't make how to change back again when i uncheck it.
have someone tell me what improvements do i have to make to the code to achieve my goal?
You could toggle these classes, e.g:
$(document).ready(function(){
var $colmd2 = $(".col-md-push-2");
$('input[type="checkbox"]').change(function(){
$(".col-md-4, .col-md-6").toggleClass("col-md-4 col-md-6");
$colmd2.toggleClass("col-md-push-2");
});
});
i think this is what exactly you are looking for...when checks add col-md-6 when uncheck get back its col-md-4
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$(".col-md-push-2").addClass("col-md-6");
$(".col-md-push-2").removeClass("col-md-4");
}
else if($(this).prop("checked") == false){
$(".col-md-push-2").addClass("col-md-4");
$(".col-md-push-2").removeClass("col-md-6");
}
});
});
</script>
</head>
<body>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<input type="checkbox" id="try">
</body>
</html>
try this code ..
$('input[type="checkbox"]').click(function () {
if ($('input[type="checkbox"]').prop('checked')) {
$('.col-md-4').addClass('col-md-6').removeClass('col-md-4 col-md-push-2')
}
else {
$('.col-md-6').addClass('col-md-4 col-md-push-2').removeClass('col-md-6')
}
});
An alternate option. Use This:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
if($(this).is(":checked")){
$(".space").addClass("col-md-6").removeClass("col-md-4 col-md-push-2");
}else{
$(".space").removeClass("col-md-6").addClass("col-md-4 col-md-push-2");
}
});
});
</script>

simple slidtoggle function with multiple divs

I have four different divs with slideToggle function. I set them to slidetoggle on click, and they work fine. However, I want the rest of the divs to close when one div is clicked. can anyone help?
below is the code I have so far.
<div id="01"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
$('#01_sub').hide();
$('#01').click(function() {
$('#01_sub').slideToggle('medium');
});
$('#02_sub').hide();
$('#02').click(function() {
$('#02_sub').slideToggle('medium');
});
$('#03_sub').hide();
$('#03').click(function() {
$('#03_sub').slideToggle('medium');
});
$('#04_sub').hide();
$('#04').click(function() {
$('#04_sub').slideToggle('medium');
});
so basically, if I click #01, I want #02,#03,#04 to stay closed or to be closed. and if I click #02, I want the rest to close.
<div id="01" class="toggle"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02" class="toggle"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03" class="toggle"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04" class="toggle"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
then
var $toggles = $('.toggle'), $subs = $toggles.next().hide();
$toggles.click(function(){
var $next = $(this).next().stop(true, true).slideToggle('medium');
$subs.not($next).slideUp();
});
Demo: Fiddle
You should use something like this:
http://jsfiddle.net/WbYu9/2/
$('.title').click(function(){
$('.showed').removeClass('showed');
$(this).addClass('showed');
$("div[id*='sub']").slideUp();
if($(this).hasClass('showed')){
$("div[id='"+$(this).attr('id')+"_sub']").slideDown();
}
})
this is more elastic form.

Toggle a div to be closed on load?

The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)

Categories

Resources