I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});
Related
How to hide other and left just one that is click?
I tried something like this, but this doesn't work since all my divs has different ids
$(document).ready(function() {
$('.campingTrips').click(function(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index");
$(this).css("z-index", z + 10);
$('#product-container').addClass('disable-click');
$('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
I'm using Java, Spring Boot, this is how I'm trying to include jQuery
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/index.js}"></script>
Edit: NEW CODE
So my html is now like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
And js like this:
$(document).ready(function () {
$('clickable').on('click', function () {
var current = $(this).attr('id');
$('clickable:not(#' + current + ')').hide();
})
})
Error from inspect console is:
Uncaught ReferenceError: $ is not defined
at index.js:119:1
You can hide all and then show the clicked one, will have the same effect.
$('.clickable').on('click', (e) =>
{
// Hide all
$('.clickable').hide();
// Show this
$(e.target).closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.
you can do following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
and
<script>
$(document).ready(function() {
$('div').on('click', function() {
var current = $(this).attr('id');
$('div:not(#' + current + ')').hide();
})
})
</script>
It will hide every other div except the one that is clicked.
I'm trying to do is when I click on a text, if another div has a child that contains this text fade in. but it's not working
$('.rel-head').click(function() {
if ($('.art-h .head-art'): contains($(this).text())) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
Use selector :contains and concat the string properly.
$('.rel-head').click(function() {
if ($('.art-h .head-art:contains('+$(this).text()+')')) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
It's not very efficient to search the entire body every time you click on each of the specified items.
This is what I'd do.
let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching
$('.rel-head').click(function() {
let el = $(this);
let text = el.text();
for (let i = 0; i < headArtArray.length; i++) {
if (headArtArray[i].innerText.includes(text)) {
el.parent().fadeIn();
} else {
$(headArtArray[i]).fadeOut();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div class="container-fluid">
<div id="header">
<div>
</div>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class = "nav-tabs">A</li>
<li class = "nav-tabs">B</li>
<li class = "nav-tabs">C</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="a">
<div class="panel-body">A content</div>
</div>
<div class="tab-pane" id="b">
<div class="panel-body">B content</div>
</div>
<div class="tab-pane" id="c">
<div class="panel-body">C content</div>
</div>
</div>
</div>
<br>
<div class="row" id="container"> image </div>
</body>
This is the HTML code, I have a three column panel showing A, B and C using bootstrap.
Underneath the content, there is a container with id = "container" at the bottom of all panels.
Here is my question:
I want to only have id = "container" shown under panel A, B. However, I don't want the panel C showing id = "container" . Is there any way to realize this?
You can use Hide()
<script src="scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#c").hide();
})
</script>
Try this using jQuery:
$("#c").hasClass("active") {
$("#container").hide()
} else {
$("#container").show()
}
Or if you prefer a more CSS method:
$("#c").hasClass("active") {
$("#container").css("visibility", "hidden")
} else {
$("#container").css("visibility", "visible")
}
First add the class for the all '''li''' items
class = "nav-tabs"
Second, we need to add '''$(document).ready(function()''' to refresh the page, thus the "class" will be updated
$(".nav-tabs").on( "click", function() {
$(document).ready(function() {
bindClick();
})
});
function bindClick(){
if ( $("#c").hasClass("active")){
$("#container").hide()
} else {
$("#container").show();
}
}
The last question is here:
Wrap some divs with Two different columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
</script>
<div class="wrapper">
<div class="rpost">-115</div>
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="rpost">-181</div>
<div class="lpost">-19</div>
<div class="rpost">-135</div>
<div class="rpost">-85</div>
<div class="lpost">-39</div>
</div>
<script type="text/javascript">
var $container = $('.wrapper').infiniteScroll({
path: '.next-post',
append: '.post',
hideNav: '.pagination',
status: '.page-load-status',
});
$container.on('append.infiniteScroll',
function(event, response, path, items) {
$(function() {
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
});
});
</script>
If scroll down three pages result:
<div class="wrapper">
<div class="left_columns">
<div class="left_columns">
<div class="left_columns">
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="lpost">-19</div>
<div class="lpost">-39</div>
</div>
</div>
</div>
</div>
have too many left_columns and right_columns divs
how to fix this?
You should to check if the .right_columns or .left_columns exists or not:
$('.wrapper').each(function() {
var lpost = $(this).find(".lpost"),
rpost = $(this).find(".rpost"),
lcol = $(this).find('.left_columns');
if(lcol.length){
var rcol = $(this).find('.right_columns');
lpost.appendTo(lcol);
rpost.appendTo(rcol);
}else{
lpost.wrapAll('<div class="left_columns"></div>');
rpost.wrapAll('<div class="right_columns"></div>');
}
})
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});