I have page with more icons and when you click on the icon you can see div where is some content. I would like to know if it is possible to write it somehow more simple then I do. I have 10 icons and I want to have always only one Div opened, so jQuery is quite long and 10 times almost the same.
This is how my jQuery looks like for 1 icon. It is almost the same for rest of them
$(".icon_pl").click(function(){
$("div#show").hide("slow");
$("div#rockz").hide("slow");
$("div#join").hide("slow");
$("div#wedding").hide("slow");
$("div#pl").toggle("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
} else {
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");}
return false;
});
Icons
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li><span class="icon_join"></span><h3>Join Us</h3></li>
<li><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
It works, but I would like to know if it is possible to make it somehow more simple and to write down every id (each div is different with different content, this is why id and not class)
Thank you
How about this. Note the selector is the LI since the span has no content
Actually Can you change the class on the span to ID or DATA attribute so one can always use
$span.attr("id").split("_")[1]; or $span.data("div2show");
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
.content div {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
you could put the name of the relating div in either a rel attribute or in a data prefixed attribute
then in JS/Jquery hide all of the divs, and only show the one you need - that relates to the new attribute.
something along the lines of
$(".icon").click(function(){
$(".maindivs div").hide();
var toggleDiv = $(this).attr("data-divToToggle");
$("#"+toggleDiv ).slideDown("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
}
else
{
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");
}
return false;
});
Following script would do what you expect.
$(function () {
//hide all div on load except first one
$('div.content div:not(#pl)').hide();
$("li.icon").click(function () {
var div = $(this).data('div');
$('div.content div.icon_active')
.removeClass('icon_active')
.hide('slow');
$('div.content div#' + div)
.addClass('icon_active')
.show('slow');
return false;
});
});
Your HTML would look something liek this.
<div class="iconteiner">
<ul>
<li class='icon' data-div='pl'><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li class='icon' data-div='join'><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li class='icon' data-div='wedding'><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li class='icon' data-div='rockz'><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li class='icon' data-div='show'><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
<div class="content">
<div id="pl" class="icon_active">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Here is WORKING JS FIDDLE
Unless the elements are related hierarchically, I'd add a data attribute to be able to easily find the correct content.
$(function() {
$('li[data-content]').click(function(){
$('li[data-content] span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
$('.content div').hide();
$('.content div[id='+$(this).data('content')+']').show();
});
});
.content div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li data-content='pl'><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li data-content='join'><span class="icon_join"></span><h3>Join Us</h3></li>
<li data-content='wedding'><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li data-content='rockz'><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li data-content='show'><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Related
Below is my html where i want to target the element id first when clicking on the list element demo similarly targeting the element id second when clicking on the list element demo2 and so on . is it doable by using javascript mouseover function . mouse out function should not display any text . I need my text display only when mouse is hovered on the list item
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can querySelectorAll to get all the required li and p elements. Then you need to iteerate over li_arr and add mouseover event listener to each li. Since their (li and p elements) numbers are equal, you can directly use the index to target the p.
once: true will make sure, event listener doesn't fire again, after firing for 1st time. Without any mouseout, the changes made to p will be retained.
let li_arr = document.querySelectorAll(".slider-controls ul li")
let p_arr = document.querySelectorAll(".slider-slide-body p");
li_arr.forEach((li, index) => {
li.addEventListener("mouseover", () => {
p_arr[index].style.display = "block"; //Add whatever style you want here
}, {
once: true
})
});
.slider-slide-body p {
display: none;
}
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
I added data-effects to your li elements. it has the id of the object you wont to effect something.
So getting this id you can apply what you wanto to this object.
i used Jquery in this example.
Try this Running the code and let me know.
$('li').on('mouseover',function(){
// some logs for better understand...
//console.log($(this).attr("id"));
//console.log($(this).data("effects"));
//getting the id of the object to effect, from the html object where the mouse is on over
eid = $(this).data("effects");
//do something to object , for example change the color...
$(eid).css("color","red");
});
$('li').on('mouseout',function(){
eid = $(this).data("effects");
//do something to object , for example restore the orig color...
$(eid).css("color","black");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo" data-effects="#first">
<strong>test1</strong>
</li>
<li id="demo2" data-effects="#second">
<strong>test2</strong>
</li>
<li id="demo3" data-effects="#third">
<strong>test3</strong>
</li>
<li id="demo4" data-effects="#fourth">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
I have html file that contains code like :
<ol class='items'>
<li class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
<div class="itemImg">
<img src='Image src' />
</div>
</div>
</li>
<li class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
....
</ol>
The JQuery:
var file = 'index.html';
$.get(
file,
function (data) {
const html = $(data),
item = html.find('li.item'),
title = item.find('p.title'),
text = item.find('div.text'),
img = item.find('div.itemImg');
$('.fetchedItem').html(item[0]);
$('.fetchedimg').html(img[0]);
if(img[0]){
//Do Something
}
}
);
I want to get the last li with class item , Also for the if statement , Sometimes there is a div with class itemImg and sometimes not , So I want to check if this div exist in the first li with class item or not.
You can use ':last' and ':first' to target the first/last divs with class "item".
Note that I use lastItem[0] -- this is because the code $('li.item:last') returns a jQuery object, and to get the actual element you need to use [0]
$('#myButt').click(function(){
//Get last div with class "item"
var lastItem = $('li.item:last');
alert(lastItem[0].id);
//Does a div exist under 1st .item with class .itemImg
if ($('li.item:first').find('.itemImg').length) alert('Yes it exists');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='items'>
<li id="li_1" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
<div class="itemImg">
<img src='Image src' />
</div>
</div>
</li>
<li id="li_2" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
<li id="li_3" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
<button id="myButt">CLick Me</button>
</ol>
I am using jQuery EasyTab to fadein/fadeout contents on hashchange function. I have multiple contents with same class names also there are 2 or 3 class names in one content. So I want to change the ID into Class.
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div class='panel-container'>
<div id="tab1">
<p>content 1</p>
</div>
<div id="tab2">
<p>content 1</p>
</div>
<div id="tab3">
<p>content 1</p>
</div>
</div>
</div>
<!-- I want to change the panel-container section like this-->
<div class='panel-container'>
<div class="tab1 tab3">
<p>content 1</p>
</div>
<div class="tab2">
<p>content 1</p>
</div>
<div class="tab3 tab1">
<p>content 1</p>
</div>
</div>
I'm not great with jQuery when it comes to manipulating javascript. I have this large file that I condensed into this fiddle. The format needs to be the same, and what I'm trying to do is:
When clicking on the Jumplink in Question 4, it should open the panel in Question 1.
http://jsfiddle.net/jzhang172/v5heud2x/1/
$(function() {
$( "#accordion" ).accordion();
$( ".active" ).accordion({
active: false,
collapsible: true,
});
});
div > p {
background:green;
}
.active{
height:500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<li class="active">
<h3>Question 1</h3>
<div>
<p>Answer 1</p>
</div>
</li>
<li class="active">
<h3>Question 2</h3>
<div>
<p>Answer 2</p>
</div>
</li>
<li class="active">
<h3>Question 3</h3>
<div>
<p>Answer 3</p>
</div>
</li>
<li class="active">
<h3>Question 4</h3>
<div>
<p>Answer 4 (jumplink to answer 1)</p>
</div>
</li>
</div>
Let me know if this is what you meant. The main thing I did is to trigger the click event on the q1.
JSFiddle
HTML
<div id="accordion">
<li class="active">
<h3 id="q1">Question 1</h3>
<div>
<p>Answer 1</p>
</div>
</li>
<li class="active">
<h3>Question 2</h3>
<div>
<p>Answer 2</p>
</div>
</li>
<li class="active">
<h3>Question 3</h3>
<div>
<p>Answer 3</p>
</div>
</li>
<li class="active">
<h3>Question 4</h3>
<div>
<p id="q4">Answer 4 (jumplink to answer 1)
</p>
</div>
</li>
</div>
JS
$(function () {
$("#accordion").accordion();
$(".active").accordion({
active: false,
collapsible: true,
});
});
$(document).ready(function () {
$("#q4").click(function () {
$( "#q1" ).trigger( "click" );
});
});
CSS
div > p {
background:green;
}
.active {
height:500px;
}
Option 2
you can remove the q1 id and change the js to:
$("#q4").click(function () {
$("#accordion").accordion("option", "active", 0);
});
I am trying to implement a list of data where each of the items, have a tab (pills actually) menu.
The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.
Here is how i am doing it:
First I have one of the menus of tabs/pills for one of the items in the list:
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>
And here is the content divs for holding the associated datas:
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>
I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/
When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.
I really hope someone can help me out here. Any help will be greatly appreciated.
You're missing <div class="tab-content"></div> around the tab-panes. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave2' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='rediger_opgave2' class='tab-pane fade'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='admin_opgave_billeder2' class='tab-pane fade'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>
I think you can use this plugin. bootstrap-multitabs