I have built a tab bar website that only uses one page I am using js to hide 3 elements and show one. When I click the links to show one and hide the others everything is messing up and 3 are shown or 2 it's random. Here is my code.
function unhide(divID, otherDivId, otherDivId, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
.hidden {
display: none;
}
.unhidden {
display: block;
}
<div id="tweaked" class="hidden">
<p>Test1</p>
<footer class="bottom">
<a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a>
<a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a>
</footer>
</div>
Perhaps you want something like this:
var anchors = document.querySelectorAll(".bottom .tab"),
showHide = function(e) {
var parent = this.parentNode;
anchors.forEach(a => {
var relatedDiv = document.getElementById(a.dataset.tab),
aClass = a.className.trim();
if (a.dataset.tab != this.dataset.tab) {
relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden";
a.className = aClass.replace("current", "");
} else {
relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden";
a.className = aClass.replace("current", "") + " current";
}
});
};
anchors.forEach(a => a.addEventListener("click", showHide));
.hidden{
display:none;
}
.unhidden{
display:block;
}
<div id="home" class="unhidden">
<p>Home</p>
</div>
<div id="tweaked" class="hidden">
<p>Tweaks</p>
</div>
<div id="other" class="hidden">
<p>Other</p>
</div>
<div id="more" class="hidden">
<p>More</p>
</div>
<footer class="bottom">
<a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a>
<a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a>
</footer>
Have you tried item.classList ?
Element.classList | MDN
You could try something like this:
if(item.classList.contains("hidden")){
item.classList.remove("hidden");
item.classList.add("unhidden");
}else{
item.classList.add("hidden");
item.classList.remove("unhidden");
}
Related
I have multiple with various div inside. On click of more or less a tag I want to display specific i.e. display_on_click
And I want to add that class only for 2 minutes after that remove that class and hide div
My HTML code as below:
$('body').on("click", ".more, .less", function() {
var obj = $(this);
obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});
.display_on_click {
display: none
}
.display_on_click.display_on_click_show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ol class="item_wrapper">
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
</ol>
</div>
Anyone have idea what I am doing wrong then let me know.
And I want to add that class only for 2 minutes after that remove that class and hide
I would do it like this:
$('body').on("click", ".more, .less", function() {
let parentLi = $(this).parent().parent();
let elementToManipulate = obj.find('.display_on_click');
elementToManipulate.addClass('display_on_click_show');
setTimeout(()=> {
elementToManipulate.removeClass('display_on_click_show')
}, 120000);
});
Instead of using closests I'm grabbing the parent of the parent which is the <li>. You can use closest to grab it. Once I am in the parent li, I find the child with the .display... class (the elementToManipulate object).
Then I add the classes and create a setTimeout to remove the class after 120.000 miliseconds (60sec * 2 * 1000msec)
<button onClick='OpenDiv'>Open</button>
function OpenDiv(){
let div = document.getElementById('BoxOne')
if (div.style.display == 'flex') {
div.style.display = 'none';
else
div.style.display = 'flex';
}
I hope this will work 👍
I have a problem with javascript show/hide content from div. When I click on the first button I got content from that but when I click on the second I need to hide content from first and show content from second div. My code for this is:
<script type="text/javascript">
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
function showHideDiv1(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
HTML:
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv1('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>
How to solve this when clicking on second button to hide content from the first button. Thanks, all
You could do with toggle the class based on clicked element
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
document.querySelectorAll('.box').forEach(a => a.classList.add('hide'))
if (srcElement != null) {
srcElement.classList.toggle('hide')
}
}
.hide {
display: none;
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" class="box hide">
<b>Places</b>
</div>
<div id="divMsg1" class="box hide">
<b>Events</b>
</div>
</div>
You could use a generic function which takes the actual elements to be shown or hidden as input parameters.
function showHideDiv(show, hide) {
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg','divMsg1')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1','divMsg')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>
I am using object-oriented javascript to show/hide 'views' on click of the nav link and also on a button that is used to go to the next view. I feel like this can definitely be simplified but I am not sure what the best way to do this is. My html is as follows:
<div id="sidebar">
<svg width="261" height="70"><use xlink:href="#logo"></use></svg>
<nav>
<ol>
<li><span>1</span>Run your business</li>
<li><span>2</span>Let us work for you</li>
<li><span>3</span>Check your books</li>
</ol>
</nav>
<a class="progress-btn main-btn visible" href="#">Start the demo</a>
<a class="progress-btn main-btn" href="#">Next</a>
<a class="progress-btn main-btn" href="#">Next</a>
<a class="progress-btn main-btn" href="#">30-day free trial</a>
</div><!--end sidebar-->
<div id="content">
<div class="page page1">
<h2>Page 1</h2>
</div><!--end page1-->
<div class="page page2">
<h2>Page 2</h2>
</div><!--end page2-->
<div class="page page3">
<h2>Page 3</h2>
</div><!--end page3-->
<div class="page page4">
<h2>Page 4</h2>
</div><!--end page4-->
</div><!--end content-->
And my object looks like this:
View = {
page: '.page',
mainLink: '#sidebar li a',
progressButton: '.progress-btn',
init: function() {
$(this.mainLink).click(this.showView.bind(this));
$(this.mainLink).click(this.activeNav.bind(this));
$(this.progressButton).click(this.sidebarButton.bind(this));
},
showView: function(e) {
e.preventDefault();
var target = $(e.target),
targetIndex = target.index(this.mainLink),
pageToTarget = targetIndex + 2;
$(this.page).removeClass("current").fadeOut('fast').promise().done(function() {
$('.page' + pageToTarget).fadeIn().addClass("current");
});
},
activeNav: function(e) {
$(this.mainLink).removeClass("active");
e.preventDefault();
$(e.target).addClass("active");
var targetIndex = $(e.target).index(this.mainLink)
$(".progress-btn").removeClass("visible");
$(".progress-btn").eq(targetIndex + 1).addClass("visible");
},
sidebarButton: function(e) {
e.preventDefault();
var target = $(e.target);
targetIndex = target.index(this.progressButton);
pageToTarget = targetIndex + 2;
if (target.text() == "30-day free trial") {
window.open("http://google.com");
} else {
target.removeClass("visible");
target.next().addClass("visible");
$(this.page).removeClass("current").fadeOut('fast').promise().done(function() {
$('.page' + pageToTarget).fadeIn().addClass("current");
});
$(this.mainLink).removeClass("active");
$("#sidebar li a").eq(targetIndex).addClass("active");
}
console.log(targetIndex);
// pageRoute(targetIndex);
}
}
View.init();
Here is a fiddle https://jsfiddle.net/rsgLbgg3/4/. How can I simplify this to work with both the nav and the button without being so repetitive.
Just learning to learn a little. Thanks in advance!
I'm new in js, I need to change several images at hover on the same imagine like this : http://www.revzilla.com/ on slider, any suggest?
thi is my html, in ct-image I have several images that move your mouse inside the container replaces with the other imgs :
<li class="product-primary clearfix">
<a href="https://validator.w3.org/nu/#textarea">
<div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">
<div class="banner-new"><span>new</span>
<p class="title-product-hidd">lorem</p>
</div>
<!--.banner-new-->
<div class="banner-acti">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--.banner-acti-->
</a>
<!--effetto all'hover-->
<div class="ct-hove">
<div class="text-pro">
<p class="text">I</p>
<p class="text">I</p>
<p class="tex">I</p>
</div>
<ul>
<li class="compare-icon"><i class="fa fa-eye"></i>
</li>
<li class="buy-icon"><i class="fa fa-heart-o"></i>
</li>
<li class="wishlist-icon"><i class="fa fa-database"></i>
</li>
</ul>
</div>
<!--.ct-hover-->
<div class="ct-descript-prod-left">
<p class="title-prod">Name</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<!--.ct-descript-pro-bt-->
<div class="ct-descript-prod-right">
<h4>€ 0.000.00</h4>
<ul>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
</ul>
</div>
<!--.ct-descript-pro-bt-->
</li>
Simplest solution I have found for you:
$(document).ready(function() {
var timeout;
var flipImages = function($container) {
var amount = $container.data("amount");
var current = $container.data("current");
if(current >= amount){
current = 1;
} else {
current = current + 1;
}
var dataAttr = "image" + current;
var image = $container.data(dataAttr);
$container.fadeOut(200, function() {
$container.css("background-image", "url(" + image + ")");
$container.fadeIn(200);
$container.data("current", current);
});
timeout = setTimeout(function() {
flipImages($container);
}, 1000)
};
$(".ct-image").hover(
function() {
var $that = $(this);
timeout = setTimeout(function() {
flipImages($that);
}, 1000)
},
function() {
if(timeout) {
clearTimeout(timeout);
}
}
);
});
.ct-image {
display: block;
height: 300px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>
Note. Solution is without flipping animation. It requires change in structure of your code.
are you looking for something like that ?
$('.carousel').mouseleave(function(){
var currentActiveImage = $('.item-show');
var nextActiveImage = currentActiveImage.next();
if(nextActiveImage.length == 0)
{
nextActiveImage = $(".carousel #item").first();
}
currentActiveImage.removeClass('item-show').addClass('item-hidden');
nextActiveImage.addClass('item-show').removeClass('item-hidden');
});
.item-show {
display: inline-block;
}
.item-hidden{
display: none;
}
.info {
position:absolute;
top: 231px;
left: 505px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="item" class="item-show">
<img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
<div class="info">
<span>some text</span>
<p>Price: 88$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
<div class="info">
<span>This is Cool</span>
<p>Price: 99$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
<div class="info">
<span>This is train</span>
<p>Price: 100$</p>
</div>
</div>
When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.
function showStuff(id) {
if (document.getElementById(id).style.display === "block") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff('tabs-1')">City</li>
<li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
<li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>
<div id="tabs-1" style="display : none">
<p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
<p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
<p> sodales.</p>
</div>
Giving all the tab content elements a common CSS class makes selecting and styling them much easier, for example in this demo and code below.
CSS
.tabContent {
display:none;
}
JavaScript
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// change tabsX into tabs-X in order to find the correct tab content
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
HTML
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)">City</li>
<li id="tabs2" onclick="showStuff(this)">Country</li>
<li id="tabs3" onclick="showStuff(this)">Humanity</li>
</ul>
<div id="tabs-1" class="tabContent">
<p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
<p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
<p> sodales.</p>
</div>
I have also updated the showElement function to be more generic so that there is less code duplication when hiding and showing the correct tab content.
The only caveat is that getElementsByClassName() is not available in IE8 or below. Other (modern) browsers have this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method.
You have to first set a display: none for all of your tab contents.
e. g.
<script type="text/javascript">
function showTab(selected, total)
{
for(i = 1; i <= total; i += 1)
{
document.getElementById('tabs-' + i).style.display = 'none';
}
document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>
<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showTab(1,3)">City</li>
<li id = "tabs2" onclick = "showTab(2,3)">Country</li>
<li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>
</ul>
If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.
you can try this
function showStuff(id){
$('#tabs1').empty();
$('#tab2').show();
}
or the other way
I think that this should do it:
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
<li id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
<li id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>
</ul>
<script type="text/javascript">
function showStuff (id)
{
document.getElementById("tabs-1").style.display = "none";
document.getElementById("tabs-2").style.display = "none";
document.getElementById("tabs-3").style.display = "none";
document.getElementById(id).style.display = "block";
}
</script>
<div id="tabs-1" style="display:none">tabs 1 content</div>
<div id="tabs-2" style="display:none">tabs 2 content</div>
<div id="tabs-3" style="display:none">tabs 3 content</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>City</li>
<li>Country</li>
<li>Humanity</li>
</ul>
<div id="tabs-1">..............</div>
<div id="tabs-2">..............</div>
<div id="tabs-3">..............</div>
</div>