JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});
Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container
Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO
Related
Trying to hide a div if a logo exists. Tried a few things with no joy, can you spot the error?
if ($('#mylogo').css('display', 'block') {
$('#sign_up_now').css('display', 'none');
}
and
$(document).ready(function(){
if ($('#my_logo').length) {
$('#sign_up_now').css('display', 'none');
}
});
So if my my_logo is active (display:block) of even present. Hide the div with an ID of sign_up_now
Would be great to have two options working, as I might need to hide a div later if sign_up_now div exists too.
EDIT
When placing in the footer of the page, if running two JQuery functions. I assume they don't seperate script tags just closing off with a ;
<script>
$(document).ready(function () {
if ($('#intrica_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
</script>
<script>
$(document).ready(function () {
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
or should it be
<script>
$(document).ready(function () {
if ($('#my_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
try using :visible and is() to test if the logo is visible, use hide() to hide the logo
if ($('#mylogo').length && $('#mylogo').is(':visible')) {
$('#sign_up_now').hide();
}
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
or
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').hide();
}
});
put any of these examples.
In your if statement you are assign the display property instead of checking.
Modify your code as below.
$(document).ready(function() {
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
You can get an element display property with the following snippet:
$(document).ready(function() {
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
//element's display is not block
}
});
Elements with visibility hidden or opacity zero are considered to be visible, because they have space in the layout. You can check if element is visible like the following snippet:
function isHidden (element) {
return $(element).is(":hidden") || $(element).css("visibility") == "hidden" || $(element).css('opacity') == 0;
}
var isShowed = !isHidden(checkElement);
If you want to check element is visible display != none and ignoring the parents visibility then you will find that doing .css("display") == 'none' is faster and will give you accurate visibility.
Here you go:
$(document).ready(function(){
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
$('#sign_up_now').css('display', 'block');
}
});
You can add a class to your element and detect if element has class or no
if($("#mylogo").hasClass("visible")){
$('#sign_up_now').css('display', 'none')
$("#mylogo").removeClass("visible");
}
guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}
I am showing articles in a list of divs. Each div has a data attribute that contains the status of the article.
<div id="article_1" data-status="read"> ... </div>
<div id="article_2" data-status="unread"> ... </div>
There is a button that toggles views to show "All Articles" or only "Unread" articles.
My toggle function looks like this, which is working fine:
function toggle(status) {
if (status == 'all') {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'block';
}
});
}
else {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'none';
}
});
}
}
Question: Is there a better (faster, efficient) way to select divs with data-status attribute and based on the status toggle the view?
Ref:
[1] Jquery select all elements that have $jquery.data()
[2] Show/hide multiple divs based on a value in their attribute
[3] filtering divs in jQuery and hiding them based on a custom data attribute tag
You can just select on the data-status attribute itself:
function toggle(status) {
if (status == 'all') {
$('[data-status=read]').css('display', 'block');
}
else {
$('[data-status=read]').css('display', 'none');
}
}
toggle('unread');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="article_1" data-status="read"> read </div>
<div id="article_2" data-status="unread"> unread </div>
I think you can go very simple here:
function toggle(status) {
if (status == 'all') {
$('*[data-status="read"]').show();
} else {
$('*[data-status="read"]').hide();
}
}
Hope that helps
I am using this jQuery script to open and close multiple divs on a page.
<script type="text/javascript">
jQuery(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
$("#expanderHead2").click(function(){
$("#expanderContent2").slideToggle();
if ($("#expanderSign2").text() == "+"){
$("#expanderSign2").html("−")
}
else {
$("#expanderSign2").text("+")
}
});
$("#expanderHead3").click(function(){
$("#expanderContent3").slideToggle();
if ($("#expanderSign3").text() == "+"){
$("#expanderSign3").html("−")
}
else {
$("#expanderSign3").text("+")
}
});
$("#expanderHead4").click(function(){
$("#expanderContent4").slideToggle();
if ($("#expanderSign4").text() == "+"){
$("#expanderSign4").html("−")
}
else {
$("#expanderSign4").text("+")
}
});
$("#expanderHead5").click(function(){
$("#expanderContent5").slideToggle();
if ($("#expanderSign5").text() == "+"){
$("#expanderSign5").html("−")
}
else {
$("#expanderSign5").text("+")
}
});
$("#expanderHead6").click(function(){
$("#expanderContent6").slideToggle();
if ($("#expanderSign6").text() == "+"){
$("#expanderSign6").html("−")
}
else {
$("#expanderSign6").text("+")
}
});
$("#expanderHead7").click(function(){
$("#expanderContent7").slideToggle();
if ($("#expanderSign7").text() == "+"){
$("#expanderSign7").html("−")
}
else {
$("#expanderSign7").text("+")
}
});
$("#expanderHead8").click(function(){
$("#expanderContent8").slideToggle();
if ($("#expanderSign8").text() == "+"){
$("#expanderSign8").html("−")
}
else {
$("#expanderSign8").text("+")
}
});
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
});
</script>
Everything works fine except, I am trying to select multiple id's so I can change the "expandersign" on all the divs when clicking "expand all". I also tried using a class name so I only need one selector but it didn't work.
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
How can I select multiple div id's?
This is html for my expand all link --
<h4 id="openalltext" class="dctopall" style="cursor:pointer;margin-bottom: 0 !important;">Expand All</h4>
As for the divs being toggled, each of them are as follows --
<h4 id="expanderHead" class="dctop" style="cursor:pointer;margin-bottom: 0 !important;">Title Text <span id="expanderSign" class="exSign">+</span>
</h4>
<div id="expanderContent" class="openall" style="display:none">content</div>
This is what worked for me -
$("#openalltext").click(function(){
$(".openall").slideToggle();
$("#expanderSign8, #expanderSign7, #expanderSign6, #expanderSign5, #expanderSign4, #expanderSign3, #expanderSign2, #expanderSign").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});
});
Your idea is good, but you need to target each element individually in a loop :
$("#expanderSign8, #expanderSign7, ...etc").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});
Your complete code can be one click if you use classes and find. Your all code can also use a class and the each to loop.
$(function(){
$(".expanderHead").on("click",function(){
$(this).find(".expanderContent").slideToggle();
var $sign = $(this).find(".expanderSign");
$sign.text() = $sign.text() == "+"?"−":"+";
});
$("#openalltext").on("click",function(){
$(".openall").slideToggle();
$(".expanderSign").each(function() {
$(this).text() = $(this).text() == "+"?"-":"+";
});
});
});
I want to show div whose id is deliveryto1 when if condition is true it doesn't show deliverto1 div. This div(#deliverto1) is always showing in else part.
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
}
});
You forgot to hide div in else part. Use .hide() in else part as shown below
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
$('#deliverto1').hide();
}
});