how to active 4 same Data ID when onClick? - javascript

i wanna to click one button which is "c-1" but it can active and display the content for all same id,but in the same time, what can i add in to call all in different div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>
<script>
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("#" + tab).addClass('active');
});
</script>


Note :Id is unique one .so better use class for multiple element match
I just coded from multiple id matches with attr matching [id="tab"]
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("[id='"+tab+"']").addClass('active');
});
.active{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>

Related

HTML, Javascript: How to share a container under specified bootstrap panels

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div class="container-fluid">
<div id="header">
<div>
</div>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class = "nav-tabs">A</li>
<li class = "nav-tabs">B</li>
<li class = "nav-tabs">C</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="a">
<div class="panel-body">A content</div>
</div>
<div class="tab-pane" id="b">
<div class="panel-body">B content</div>
</div>
<div class="tab-pane" id="c">
<div class="panel-body">C content</div>
</div>
</div>
</div>
<br>
<div class="row" id="container"> image </div>
</body>
This is the HTML code, I have a three column panel showing A, B and C using bootstrap.
Underneath the content, there is a container with id = "container" at the bottom of all panels.
Here is my question:
I want to only have id = "container" shown under panel A, B. However, I don't want the panel C showing id = "container" . Is there any way to realize this?

You can use Hide()
<script src="scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#c").hide();
})
</script>

Try this using jQuery:
$("#c").hasClass("active") {
$("#container").hide()
} else {
$("#container").show()
}
Or if you prefer a more CSS method:
$("#c").hasClass("active") {
$("#container").css("visibility", "hidden")
} else {
$("#container").css("visibility", "visible")
}

First add the class for the all '''li''' items
class = "nav-tabs"
Second, we need to add '''$(document).ready(function()''' to refresh the page, thus the "class" will be updated
$(".nav-tabs").on( "click", function() {
$(document).ready(function() {
bindClick();
})
});
function bindClick(){
if ( $("#c").hasClass("active")){
$("#container").hide()
} else {
$("#container").show();
}
}

How to add tags depending on the length of another div

I have the following code below. I need to add a <li> tag inside the <ul> of the carousel-controls for each image, since the number of images can vary, I need to do it with js, but not sure what to do after I get the length of image-controller
var img_number = $(".image-container img").length;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
<img src="/img.png" alt="xga-1">
<img src="/img2.png" alt="xga-1">
<img src="/img3.png" alt="xga-1">
</div>
<div class="carousel-controls">
<p class="angle-left" data-icon='ei-chevron-left' data-size='m'></p>
<ul>
<!-- Insert a <li> for each image -->
</ul>
<p class="angle-right" data-icon='ei-chevron-right' data-size='m'></p>
</div>

You don't really need to do anything with the length of the images you found, you can just loop over them and append them to the UL element, wrapped with a new li element:
$(function() {
$(".image-container img").each((i, el) => {
$('ul').append($("<li>").append(el));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
<img src="/img.png" alt="xga-1">
<img src="/img2.png" alt="xga-1">
<img src="/img3.png" alt="xga-1">
</div>
<div class="carousel-controls">
<p class="angle-left" data-icon='ei-chevron-left' data-size='m'></p>
<ul>
<!-- Insert a <li> for each image -->
</ul>
<p class="angle-right" data-icon='ei-chevron-right' data-size='m'></p>
</div>

Like this you can add them
$(".image-container img").each(function(){
$("ul").append("<li>"+$(this).html()+"</li>")
}
);

Multiple tabs in a single page, but the content of other tabs are also displaying in the first tab

This is my HTML code:
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Hotels In Asia</p> <br>
<div class="asia1">
<p class="para1">$499 for 1 night</p>
<button>Book Now</button>
<p class="para2">See Photo</p>
</div>
<div class="asia1">
<p class="para1">$499 for 1 night</p>
<button>Book Now</button>
<p class="para2">See Photo</p>
</div>
<div class="asia1">
<p class="para1">$499 for 1 night</p>
<button>Book Now</button>
<p class="para2">See Photo</p>
</div>
<div class="tab11">
<div class="place active">
<p>Places In Asia</p>
<div class="asia">
<img src="../images/asia_hotel_1.jpg" alt="Asia hotel">
</div>
<div class="asia">
<img src="../images/asia_hotel_2.jpg" alt="Asia hotel">
</div>
<div class="asia">
<img src="../images/asia_hotel_3.jpg" alt="Asia hotel">
</div>
</div>
</div> <!-- tab11 end-->
</div><!-- tab1 end-->
<div id="tab2" class="tab">
<p>Hotels In Europe</p>
<p>para of tab2</p>
</div>
<div id="tab3" class="tab">
<p>Tab 3 content here!</p>
<p>para of tab3</p>
</div>
<div id="tab4" class="tab">
<p>Tab 4 content here!</p>
<p>para of tab4</p>
</div>
</div>
</div>
And this is my jquery which i used for multiple tabs within a single page.
<script type="text/javascript">
$(document).ready(function() {
$('.tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).delay(400).slideDown(400);
$('.tabs ' + currentAttrValue).siblings().slideUp(400);
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
When I open my html page, all the content of other tabs also displaying in first tab. But when I switch to other tabs, contents are displayed fine.

Hope this piece of code will work. Please test it once.
$(document).ready(function() {
$(".tab").hide(); // first hide all the tabs
$(".tab").first().show(); // show only first tab by default
$('.tab-links a').on('click', function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
currentAttrValue = currentAttrValue.substring(1); // Remove # from the href
// Show/Hide Tabs
$('#' + currentAttrValue).delay(400).slideDown(400); //add # to get the element id with specific id.
$('#' + currentAttrValue).siblings().slideUp(400);
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
});
});

You have to specify the tab id when you got to the landing page so that other page contents would not come.

how to rotationally change the content of 'div' on mouseover on each 'li'

whenever, I mouseover on the 'li', then, that particular 'li' attribute need to changed to 'clsSect'. On the other hand, based on the list[li] selection, the div content has to set to 'display:block' other should changed to 'display:none'.
if the first 'li' selected, then, the first 'div' need to be selected, likewise
if the second 'li' selected, then, the second 'div' need to be selected,
This below code does not work as expected. Any help please?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID3">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID2">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID1">
<p><span>sample1</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList clsSect"></li>
<li id="fpn2" class="myList"></li>
<li id="fpn3" class="myList"></li>
</ul>
</div>
<script>
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
($hover2, $hover3).css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
($hover1, $hover3).css('display', 'none');
$hover2.css('display', 'block');
}else {
($hover1, $hover2).css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
</script>
</body>
</html>

Need to clean up the code.
In HTML we set the ID for the contents we should hide/show
...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...
Then we use them as data attributes for list elements
<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>
Then with jquery we hide all contents
$('.perimgleft').hide();
So that we'll show the right content related to the hovered element:
$('ul.clearfix.rouncorner li').mouseover(function(){
$('ul.clearfix.rouncorner li').removeClass("clsSect");
$(this).addClass("clsSect");
var contentId = $(this).data("show");
$('.perimgleft').hide();
$(contentId).show();
})
DEMO HERE

try this :
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
$hover2.css('display', 'none');
$hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
$hover3.css('display', 'none');
$hover1.css('display', 'none');
$hover2.css('display', 'block');
}else {
$hover2.css('display', 'none');
$hover1.css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});

Are you looking something like this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.mainBodyContent{
display: none;
}
</style>
</head>
<body>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList">contact</li>
<li id="fpn2" class="myList">about</li>
<li id="fpn3" class="myList">careers</li>
</ul>
</div>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID3">
<p><span>sample1</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID2">
<p><span>sample2</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID1">
<p><span>sample3</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<script>
var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");
$(".myList").mouseout(function(evt) {
$('.mainBodyContent').css('display','none');
});
$(".myList").mouseover(function(evt) {
var currentId=$(this).attr('id');
if(currentId=='fpn1'){
hover1.css({'display':'block'});
}
if(currentId=='fpn2'){
hover2.css({'display':'block'});
}
if(currentId=='fpn3'){
hover3.css({'display':'block'});
}
});
</script>
</body>
</html>

Toggle Multiple divs for show hide

ok, So I have multiple divs(7) which I want to toggle for show hide. If one div is open rest should hide and when I open a new div the others should hide. I have been able to accomplish this with the below piece of jquery
function showDivs() {
$(".head").click(function() {
$(".Content").hide();
$(this).next().fadeIn("slow");
})
}
where .head is the header for each div and .Content is the class for divs. I have got it working perfectly, by calling showDivs() from .head() Now the question is that on the left hand side of my page, I have ul li set. I have 7 li items, that correspond to 7 divs. I mean on click of first li the corresponding div should open up and the others should hide, and on click of 2nd li the 2nd div should open up and the others hide.
Does anybody have an idea how to make these divs show hide on the action of li items on left. I know I have to pass parameters for showDivs(), but don't know how?
help is appreciated

I believe this is where .index() comes into play:
$(function() {
$('ul li').each(function() {
$(this).click(function(e) {
var i = $(this).index();
$('div').hide();
$('div:eq('+i+')').show();
});
});
});
That's a pretty basic markup but I'm sure you can work out how to get it working with your code. Hope I helped!
http://jsfiddle.net/Z3Hj7/
EDIT: After having seen your fiddle I think i worked out exactly what you want:
$(function() {
$('ul li').each(function() {
$(this).click(function(e){
e.preventDefault();
var i = $(this).index();
$('.content').hide();
$('.head:eq('+i+')').next().show();
});
});
});
Take a look at the fiddle: http://jsfiddle.net/DTcGD/25/

If I understand your HTML structure correctly, it looks about like this:
<!-- The list... -->
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
<div class="head">Header One</div>
<div class="Content">Content One</div>
<div class="head">Header Two</div>
<div class="Content">Content Two</div>
<div class="head">Header Three</div>
<div class="Content">Content Three</div>
<div class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
...only with seven items rather than four.
If so, this would do it (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#container div.head:eq(" + $(this).index() + ")"));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
There, I'm relating the list to the headers implicitly, by where they are in their container. So the first li relates to the first div with class="head", the second to the second, etc. I'm doing that by using index to know which li was clicked, and then looking up the related div.head using :eq.
Doing it structurally rather than with id values makes it much easier to maintain. Alternately, though, you could do it by giving each li a data-div attribute with the value of the id of the related div:
<ul>
<li data-div="h1">One</li>
<li data-div="h2">Two</li>
<li data-div="h3">Three</li>
<li data-div="h4">Four</li>
</ul>
<div id="container">
<div id="h1" class="head">Header One</div>
<div class="Content">Content One</div>
<div id="h2" class="head">Header Two</div>
<div class="Content">Content Two</div>
<div id="h3" class="head">Header Three</div>
<div class="Content">Content Three</div>
<div id="h4" class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
Then (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#" + $(this).attr("data-div")));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
data-* attributes are valid as of HTML5, but all browsers support them right now. (The data-* thing is an attempt to codify and reign in people's use of invalid attributes, by giving them a valid way to do it without conflicting with future additions to the spec.)

How about asigning an id to each list item and a corosponding id to each item container. So your list items get an id of "item01".."item07" and your content containers gets id of "item01c".."item07c". Then you can do somehing like this:
$("li").click(function() {
showDivs($(this).attr("id"));
})
function showDivs(callerId) {
$(".content").hide();
$(".content", "#" + callerId + "c").fadeIn();
}
Working example can be seen here: http://jsfiddle.net/ECbkd/5/1

If you want to use .index() as suggested by someone earlier, then I belive this would be the simplest approach (check it out here http://jsfiddle.net/ECbkd/7/):
$("li").click(function() {
$(".content").hide();
$('.item').eq($(this).index()).children('.content').fadeIn();
})
You could add this to be able to show content when clickin on header also:
$("h2", ".container").click(function() {
$(".content").hide();
$(this).parent().children('.content').fadeIn();
})
* EDIT START *
To let content toggle on click at header use this:
$("h2", ".container").click(function() {
$(".content").not($(this).parent().children('.content')).hide();
$(this).parent().children('.content').toggle();
})
Updated code here
http://jsfiddle.net/ECbkd/8/
* EDIT END *
This is based on html like this:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class='container'>
<div class='item'>
<h2>Header 1</h2>
<div class='content'>Content 1</div>
</div>
<div class='item'>
<h2>Header 2</h2>
<div class='content'>Content 2</div>
</div>
<div class='item'>
<h2>Header 3</h2>
<div class='content'>Content 3</div>
</div>
<div class='item'>
<h2>Header 4</h2>
<div class='content'>Content 4</div>
</div>
<div class='item'>
<h2>Header 5</h2>
<div class='content'>Content 5</div>
</div>
<div class='item'>
<h2>Header 6</h2>
<div class='content'>Content 6</div>
</div>
<div class='item'>
<h2>Header 7</h2>
<div class='content'>Content 7</div>
</div>
</div>

you can show and hide multiple divs by using this simple method
function w3_open() {
document.getElementById("id01").style.display =
"block"; document.getElementById("id02").style.display = "block"
}
make sure that you are using w3.css
<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display-
container">
<span onclick="document.getElementById('id02').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>

If you give the li's and the corresponding divs the same class, then you can say something like
function showDivs() {
$("li").click(function() {
$(".Content").hide();
clickedID = $(this).attr("class");
$('div#'+clickedID).fadeIn("slow");
})
}

Categories

Resources