Need to modify this script to close other elements that are not active
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I have three areas for different departments in the company. On page load, the FIRST one opens automatically. What I need is so if you scroll down and open another one, all others will close. Effectively only allowing ONE area to be open at a time.
$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});jquery
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
add a comment |
0
I have three areas for different departments in the company. On page load, the FIRST one opens automatically. What I need is so if you scroll down and open another one, all others will close. Effectively only allowing ONE area to be open at a time.
$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});jquery
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
add a comment |
0
0
0
I have three areas for different departments in the company. On page load, the FIRST one opens automatically. What I need is so if you scroll down and open another one, all others will close. Effectively only allowing ONE area to be open at a time.
$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});jquery
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
I have three areas for different departments in the company. On page load, the FIRST one opens automatically. What I need is so if you scroll down and open another one, all others will close. Effectively only allowing ONE area to be open at a time.
$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});$(document).ready(function() {
setTimeout(function() {
$('.team-list-header').first().trigger("click");
}, 1000);
$('.team-list-wrapper').hide();
$('.team-list-header ').on('click', function() {
var pointer = '#' + $(this).data('view');
var isActive = $(this).hasClass("tab-active");
if (isActive) {
$(pointer).hide();
$(this).find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$(this).removeClass("tab-active");
} else {
$(pointer).show();
$(this).find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$(this).find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$(this).addClass("tab-active");
}
});
});jquery
jquery
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
edited Nov 23 '18 at 17:17
Pete
42.3k1879121
42.3k1879121
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
asked Nov 23 '18 at 17:13
aaronmarpaaronmarp
31
31
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450685%2fneed-to-modify-this-script-to-close-other-elements-that-are-not-active%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
add a comment |
0
$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
add a comment |
0
0
0
$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});$(document).ready(function() {
$('.team-list-wrapper').hide();
//bind the click on all the headers like before, storing a
//jQuery object of all the headers
var $teamListHeaders = $('.team-list-header').on('click', function() {
//find the header with the active tab, to get the previously selected one
//filter out the "this" incase the user double clicks the same one
var activeHeader = $teamListHeaders.not(this).filter('.tab-active');
//if there is an active header that was not the same as "this",
//toggle it off
if (activeHeader) toggleTeamList(activeHeader);
//toggle this header off or on
toggleTeamList(this);
});
setTimeout(function() {
//toggle on the first header after a second
toggleTeamList($teamListHeaders.first());
}, 1000);
//refactored the toggle logic to a method that could be used in the
//multiple places without having to proxy the logic through the DOM
//by click triggers
function toggleTeamList(header) {
var $header = $(header);
var $pointer = $('#' + $header.data('view'));
if ($header.hasClass("tab-active")) {
$pointer.hide();
$header.find('a.click').html('Expand<i class="fas fa-plus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-right"></i>');
$header.removeClass("tab-active");
} else {
$pointer.show();
$header.find('a.click').html('collapse<i class="fas fa-minus-circle"></i>');
$header.find('h5 > a').html('<i class="fas fa-caret-down"></i>');
$header.addClass("tab-active");
}
}
});answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
answered Nov 23 '18 at 17:35
TaplarTaplar
18.3k21529
18.3k21529
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450685%2fneed-to-modify-this-script-to-close-other-elements-that-are-not-active%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
