JQuery tabs not switching - javascript

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

Related

How to change a css class selector using javascript

Hi guys i'm attempting to change the top location of a popup using JavaScript. Here is the CSS code:
.popup .content {
position:absolute;
top:34.2%; //This is what i'm attempting to change
left:183%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:647px;
height:333px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
And here is the javaScript
function togglePopup(){
if(document.getElementById("Check1").checked){
//Change popup content's top position here
document.getElementById("popup-1").classList.toggle("active");
}
Here is some of the HTML if needed
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
//inputs go in here
</div>
Try:
function togglePopup() {
if (document.getElementById("Check1").checked) {
//Change popup content's top position here
document.getElementById("popup-1").style.top = '10%';
}
}
(not tested)
I see that you want to modify the
.popup .content {
top:34.2%; //This is what i'm attempting to change
which is the second child of the container with .popup class
but in javascript you get the parent container, which would be .popup class or #popup-1 id
With the code you provided I can't manage to test , but there might be an issue there

jQuery ToggleClass on multiple buttons

I am trying to toggle visibility of elements with jQuery. The page should load with all elements active. Then, when you click on one of 3 filter buttons, it should hide the elements that don't match.
I can get it to work with addClass and removeClass, but I want to be able to toggle the elements on and off when you click each button. This is where it falls apart. With toggleClass, it works on the first click, but when I try to toggle the buttons, the classes get all mixed up.
Here is a working fiddle using removeClass (no toggling):
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').removeClass('d-none');
});
And here is a non-working fiddle where I attempt to toggle the classes –– once you click around a bit, it gets mixed up:
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').toggleClass('d-none');
});
What am I doing wrong?
Thanks!
1.You have set the default to active to all of them.
2.You have to do make the decision based on the active not active of the button with hasClass()
You don't need code redundancy. You can simplify it by giving each button an id.
$(".map-filters .filter").click(function() {
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
if ($(this).hasClass('active')){
var color = $(this).attr('id');
$("#map").children().addClass('d-none');
$("." + color + "-marker").toggleClass('d-none');
}
else {
$("#map").children().removeClass('d-none');
}
});
.d-none {
visibility:hidden!important
}
#map {
border:1px solid #000;
padding:20px;
}
#map > div {
width:30px;
height:30px;
display:inline-block;
margin:10px;
}
.map-filters {
margin-top:50px;
}
.map-filters button {
opacity:0.5;
}
.map-filters button.active {
opacity:1;
}
.heart,
.red-marker {background:red;}
.heart-pvl,
.green-marker {background:green;}
.pvl,
.blue-marker {background:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map">
<div class="blue-marker"></div>
<div class="red-marker"></div>
<div class="red-marker"></div>
<div class="green-marker"></div>
<div class="blue-marker"></div>
<div class="green-marker"></div>
</div>
<div class="map-filters">
<button type="button" class="filter heart" id="red">Heart Locations</button>
<button type="button" class="filter heart-pvl" id="green">Heart & PVL Locations</button>
<button type="button" class="filter pvl" id="blue">PVL Locations</button>
</div>

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture
add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link
The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}
JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.
Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div
The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});

Table pop-up in Javascript

Does anyone know how to create tables similar to the tables found on http://spring.io/docs are created? I am specially interested in the "pop-up" after a click on an item.
Here is an example using jQuery:
HTML
<div class="item">
<div class="label">Label 1</div>
<div class="dropdown">More info about label 1</div>
</div>
You have items, with a label and a dropdown. The dropdowns are set to display:none and have a position absolute, to allow them to overlap other items.
CSS
.item{
position:relative; /*Your dropdowns will relate to their parent item*/
}
.dropdown{
/* ...some styles... */
display:none;
position:absolute;
}
Then, with jQuery, you can toggle a class .open on the items, which will allow you to display the dropdown on demand.
CSS
.open .dropdown{
display:block;
}
jQuery
$('.item').on('click',function(){
//if this item is already open
if($(this).hasClass('open'))
{ //close it
$(this).removeClass('open');
}
else
{ //or close everything and open this one
$('.item').removeClass('open');
$(this).addClass('open');
}
});
Or, if you want a shorter version:
$('.item').on('click',function(){
$(this).toggleClass('open').siblings().removeClass('open');
});
JS Fiddle demo

Categories