Display DIV onclick and hide onclick with transition - javascript

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);
});

Related

how to open a div click on two button clicks one after other in jquery

i have a problem regarding button click i have four buttons on click of two buttons back to back i want open div so based on different combination of clicks i want to open different divs
here is my html
<button id="B">B</button>
<button id="Q">Q</button>
<button id="Ag">Ag</button>
<button id="Cli">Cli</button>
<div id="BAg"></div>
<div id="BCli"></div>
<div id="QAg"></div>
<div id="QCli"></div>
so on click of B and Ag i want to open div with id = "BAg" and
on click of B and Cli i want to open div with id = "BCli" and
on click of Q and Ag i want to open div with id = "QAg" and
on click Q and Cli i want to open div with id = "QCli"
Here is jquery what i have tried
$(document).ready(function () {
$("#B").click(function(){
$("#Ag").click(function(){
alert("B Ag")
});
});
$("#B").click(function(){
$("#Cli").click(function(){
alert("B Cli")
});
});
$("#Q").click(function(){
$("#Ag").click(function(){
alert("Q Ag")
});
});
$("#Q").click(function(){
$("#Cli").click(function(){
alert("Q Cli")
});
});
});
so can we help me with this
You can use a variable to append the ids from clicked elements like below:
$(function() {
let creatingString = false, str;
$("#B a, #Q a").click(function() {
creatingString = true; str = "";
str += $(this).parent().prop("id")
})
$("#Ag a, #Cli a").click(function() {
if (!creatingString) return
else {
str += $(this).parent().prop("id")
console.log("Selected ID:", str)
$(".selected").removeClass("selected")
$("#" + str).addClass("selected")
creatingString = false
}
})
})
div.selected {
background: yellow;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myTabs" class="nav nav-pills nav-justified" role="tablist" data-tabs="tabs">
<li id="B">B</li>
<li id="Q">Q</li>
<li id="Ag">Ag</li>
<li id="Cli">Cli</li>
</ul>
<div id="BAg">BAg</div>
<div id="BCli">BCli</div>
<div id="QAg">QAg</div>
<div id="QCli">QCli</div>

jQuery stop function running twice

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>

javascript How to get two toggles on a page to work independently

Hi i currently have two toggles, one is on the sidebar and one is in the main body. They currently work together which is annoying, even though i am using to different scripts. The scripts i am using at the moment for the toggles are almost identical, however, even when using completely different scripts they still work together.
what i mean by work together is when i click the toggle on the main body the side bar toggle reacts.
They are toggles which collapse on oclick.
<script>
var divs = ["Menu", "Add"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
<script>
$(document).ready(function () {
// set up the click event
$('.body > a').on('click', function(){
$(this).next('div').siblings('div:not(#Menu)').hide("1");
});
// trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings
// if i want a transition
$('#Menu').trigger('click');
// options include >>>, but it's slower // $('a[name="account"]').trigger('click');
});
</script>
<!-- sidebar toggle-->
<script>
var divs = ["Order", "Rest", "Franc"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
<!-- Change color on click-->
<script>
$(document).ready(function() {
$('.sidebar h3').on('click', function() {
$('.sidebar h3').css('color', 'black');
$(this).css('color', 'red');
});
$('h3#open').trigger('click'); //Your account red on page load
});
</script>
<!--Your account toggle open on load -->
<script>
$(document).ready(function () {
// set up the click event
$('.sidebar > a').on('click', function(){
$(this).next('div').siblings('div:not(#Franc)').hide("1");
});
// trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings
// if i want a transition
$('#francc').trigger('click');
// options include >>>, but it's slower // $('a[name="account"]').trigger('click');
});
</script>
<div class="sidebar">
<!-- Orders toggle-->
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Overview</li>
</ul>
</div>
</div>
<!--Restaurant toggle-->
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;"><div>
<ul class="tabs">
<!-- <li id="order" class="rred">restaurant</li>-->
<li id="order" class="rgreen">New restaurant</li>
</ul>
</div>
</div>
<!-- Account toggle-->
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3 id="open">Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Blue" >Order History</li>
</ul>
</div>
</div>
</div>
<div id=body>
<!-- Menu toggle -->
<div class="container_head"> <!-- red header top of container-->
<a id="Menu" class="header" href="#" onclick="toggleVisibility('Menu');"><h3>Menu Section</h3></a>
</div>
<div id="Menu_form" style="display: none;">
<form id="MenuForm" action ="javascript:void(0);" method="POST">
<!-- <div class="field">-->
<label for="Name">Name</label>
<input type="text" name="Name" id="Name" placeholder="Steaks pattern="[a-zA-Z]"
required tabindex="1">
<br>
<label for="Description">Description</label>
<input type="text" name="Description" id="Description" placeholder="Fresh USDA Choice steaks, seasoned with hickory-smoked sea salt." tabindex="2">
<br>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
</div>
<a id="add_prod" class="header" href="#" onclick="toggleVisibility('Add');"><h3>Orders</h3></a>
<div id="add" style="display: none;">
</div>
Bringing together #j08691 and Leo Farmer's comments, you need to have unique IDs and function names. When you call toggleVisibility(...), it's going to call the second declaration of that method. Also, when you call document.getElementById(...) on something like "order", it's going to stop at the first instance it finds (In your case, the a tag).
Give your functions unique names, give your items unique IDs (if you want them to all do the same thing, you can look at using the same class for each item), and you should be in a better spot.

How can I toggle a div and load content into div during open state?

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});
}
});
});

Loop through multiple PHP generated DIVs with show/hide on hover

I just set up the following jQuery code and it's working fine, however I have a feeling it can be refined into a much shorter loop with a counter. I am just familiar enough with jQuery to know this is a possibility but get stuck on the syntax etc. Thank you, and let me know if you need more specifics.
$(".moviethumb:eq(0)").on("mouseover",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").show();
$(".moviedetail:eq(1), .moviedetail:eq(2)").hide();
}
);
$(".moviedetail_wrapper:eq(0)").on("mouseleave",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
}
);
$(".movieout:eq(0)").on("mouseout",
function () {
$(".moviedetail:eq(0), .hoverarrow:eq(0)").hide();
}
);
$(".moviethumb:eq(1)").on("mouseover",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").show();
$(".moviedetail:eq(0), .moviedetail:eq(2)").hide();
}
);
$(".moviedetail_wrapper:eq(1)").on("mouseleave",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
}
);
$(".movieout:eq(1)").on("mouseout",
function () {
$(".moviedetail:eq(1), .hoverarrow:eq(1)").hide();
}
);
$(".moviethumb:eq(2)").on("mouseover",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").show();
$(".moviedetail:eq(1), .moviedetail:eq(0)").hide();
}
);
$(".moviedetail_wrapper:eq(2)").on("mouseleave",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
}
);
$(".movieout:eq(2)").on("mouseout",
function () {
$(".moviedetail:eq(2), .hoverarrow:eq(2)").hide();
}
);
HTML:
<ul class="movies-holder">
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
<li>
<a href="#">
<div class="movieout"></div>
<div class="moviethumb">
<img src="theimage.jpg />
</div>
</a>
<div class="moviedetail_wrapper">
<div class="hoverarrow"></div>
<div class="moviedetail">
<p>The movie details.</p>
</div>
</div>
</li>
</ul>
$(".moviethumb").on("mouseover",
function () {
var index = $(".moviethumb").index(this);
$(".moviedetail, .moviedetail").hide();
$(".moviedetail:eq(" + index + "), .hoverarrow:eq(" + index + ")").show();
}
);
$(".movedetail_wrapper").on('mouseleave', function () {
$(this).find('.moviedetail, .hoverarrow').hide();
});
.movieout can be handled in a similar fasion as the first function. Essentially, you can get the index you want to use dynamically.
I solve this using CSS.
1) Give all divs an unique id="movie321"
2) Generate CSS rule for each.
ul.movies-holder li { display: block; }
ul.movies-holder.show320 li.movie320 { display: block; }
ul.movies-holder.show321 li.movie321 { display: block; }
3) In onmouseover:
document.getElementById('movies-holder').className = 'movies-holder show321';
This is way faster than looping in JavaScript.
Try something like this:
$(".moviethumb").on("mouseover", function() {
$(".moviedetail").hide();
$(this).parents("li").find(".moviedetail").show();
});
$(".moviedetail_wrapper").on("mouseleave", function() {
$(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});
$(".movieout").on("mouseout", function() {
$(this).parents("li").find(".moviedetail, .hoverarrow").hide();
});
using $(this).parents("li") you are looking for ancestors that are . Then finding the class within that parent. You don't need to iterate.

Categories