I have a html like this
<div class="accordion_in1 accordion_in acc_active">
<div class="acc_head" id="removeArrow">
<div class="acc_icon_expand"></div>
Investor Relations
</div>
<div class="acc_content" style="display: block;">
<div class="acc_content_faq1">
<ul>
<li>
Profile
</li>
</ul>
</div>
<div class="acc_content_faq1">
<ul>
<li>
Directors
</li>
</ul>
</div>
</div>
</div>
I need to remove the class acc_head from the second div if there is no div with class acc_content
I tried to get this in jquery like
<script>
$(document).ready(function(){
if ($("accordion_in > div.acc_content").length < 0) {
$('#removeArrow').removeClass('.acc_head')
}
});
</script>
But I can't able to remove the class.Can any one help
Thanks in advance for help
Try this code.
if ($("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('acc_head')
}
If there is no selector with accordion_in > div.acc_content, the length is 0, not a value less than 0.
Try this code.
if (!$("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('.acc_head')
}
Try this:
<script>
$(document).ready(function(){
if (($(".acc_active").find("div.acc_content")).length == 0) {
$('#removeArrow').removeClass('.acc_head');
}
});
</script>
Related
I have a dropdown list where each item is closed until you click that particular item.
HTML:
<div id="dropdowntabs">
<h2 class="drop">
<a id="tabhead1" href="javascript:dropdowntabs('droptab1');">MAIN TITLE</a>
</h2>
<div name="droptab" class="droptab" id="droptab1" style="display:none;">
<p>TEXT TO SHOW</p>
</div>
</div>
Javascript:
function dropdowntabs(selectedtab) {
$('div[name|="droptab"]').each(function(index) {
if ($(this).attr("id") == selectedtab) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
Each droptab has a different number assigned to it. This works fine in HTML but I wanted to use it in Wordpress and as I can't manually assign a number to each tab they are all opening when one is clicked.
Could anybody explain how I can get the number to be added in increments automatically please.
Much appreciated,
Jason.
Use generic traverses instead. Within an event handler this is the element that event occurs on and starting at that element you can traverse to the corresponding matching element
$('.drop a').click(function() {
var $content = $(this).parent().next().show(200)
$('.droptab').not($content).hide(200);
});
.droptab {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
<h2 class="drop">
<a>MAIN TITLE</a>
</h2>
<div class="droptab">
<p>MAIN TITLE CONTENT</p>
</div>
<h2 class="drop">
<a>SECOND TITLE</a>
</h2>
<div class="droptab">
<p>SECOND TITLE CONTENT</p>
</div>
</div>
You had almost all the code already there: look at the example:
In this example we don't need ids anymore, we use the respective indices to select and show.
//select on index not on ID
function dropdowntabs(selectedtab) {
//select the index number comparing the clicked element to it's nodelist
$('div.droptab').each(function(index) {
if ($(this).index('div.droptab') == selectedtab) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
//Assign the click events
$('h2.drop > a').on("click", function(e) {
//select the index number comparing the clicked element to it's nodelist
dropdowntabs($(this).index("h2 > a"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
<a></a>
<!-- assign click handlers through code -->
<h2 class="drop"><a id="tabhead1" href="javascript:void(0);">MAIN TITLE</a> <a id="tabhead2" href="javascript:void(0);">MAIN TITLE 2</a></h2>
<div name="droptab" class="droptab" style="display:none;">
<p>TEXT TO SHOW</p>
</div>
<div name="droptab" class="droptab" style="display:none;">
<p>TEXT TO SHOW</p>
</div>
</div>
so i have 3 articles from a local newspaper i want user to click a button and the content of the page switch, i wrote my script the first time i click any of the buttons it will switch the content for me but when clicking any button after that i get no results
my src code is something like
<div id="banner">
<div id="nav">
<ul>
<li><button onclick="one()">one</button></li>
<li><button onclick="two()">two</button></li>
</ul>
</div>
<div id="thewholetext">
<p id="a">
//an article here
<p id="b">
// a 2nd article here
</div>
</div>
and the java script is like
function one () {
document.getElementById("thewholetext").innerHTML = a.innerHTML;
}
function two() {
document.getElementById("thewholetext").innerHTML = b.innerHTML;
}
the idea is i have the div called "the whole text" which contain the two articles each article with unique id so i can control and display only one of them when user clicks a its corresponding button
i hope its clear. thanks in advance
<html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<style>
p{
display:none;
}
</style>
<script>
$(document).ready(function(){
$("button").on("click",function(e){
$("p").hide();
$("p#"+this.id).show();
});
});
</script>
<body>
<div id="nav">
<ul>
<li><button id="one">one </button> </li>
<li><button id="two">two </button> </li>
</ul>
</div>
<div id="thewholetext">
<p id="one">
//an article here
</p>
<p id="two">
// a 2nd article here
</p>
</div>
</div>
</body>
</html>
Try to declare your function like this
$("button").click(function(e) {
if (e.target.id == "one") {
$("#a").show();
$("#b").hide();
} else {
$("#a").hide();
$("#b").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li>
<button id="one">one </button>
</li>
<li>
<button id="two">two </button>
</li>
</ul>
</div>
<div id="thewholetext">
<p id="a" style="display:none;">
//an article here
</p>
<p id="b" style="display:none;">
// a 2nd article here
</p>
</div>
Hope it helps :)
// Cache buttons and articles
var buttons = document.querySelectorAll("[data-showid]"),
allArticles = document.querySelectorAll(".article");
function toggleArticle(event) {
event.preventDefault(); // Prevent document scrollTop
var id = this.dataset.showid,
article = document.getElementById( id );
[].forEach.call(allArticles, function( art ) {
art.style.display = art === article ? "block" : "none";
});
}
// Button clicks
[].forEach.call(buttons, function( btn ) {
btn.addEventListener("click", toggleArticle, false);
});
.hidden{display:none;}
[data-showid]{ color:red; cursor:pointer; }
<a data-showid="article1">One</a>
<a data-showid="article2">Two</a>
<p id="article1" class="article">This is article ONE</p>
<p id="article2" class="article hidden">This is article TWO</p>
I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>
Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/
Thank you in advance for your help! It's my first post, wasn't sure about the formatting so I hope I've done it correctly.
I'd like to know if I can show/hide hidden Nested divs using the following script taken from http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm:
<script type="text/javascript">
function swapLyr(num) {
idCount=0
while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)
if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}
idCount++
}
}
</script>
<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li>
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>
<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>
I would like to use something like:
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
<a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
i see it know. use this:
<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
Show Hidden Div within this Div
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
el=document.getElementById("mydiv"+num);
if(el.style.display=="none"){
el.style.display="block";
}else{
el.style.display="none";
}
}
</script>
a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.
Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});
Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.