I need to hide a div when an input element is empty (the user has not typed anything in). I have tried this and this but they do not work for me. the div I want to hide has an id of search-result-container and the input has an id of search-input. I need to hide the div when the input is empty.
Here is the relevant part of my HTML code:
<!-- Html Elements for Search -->
<div id="search-container">
<input type="text" name="search-input" id="search-input" placeholder="🔎 type to search...">
<h1></h1>
<h1></h1>
<h1></h1>
</div>
</div>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<div class="container" id="search-result-container" class="show_hide">
<ul id="results-container"></ul>
<!-- Script pointing to search-script.js -->
<script src=[SEARCH JS]></script>
<!-- Configuration -->
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
searchResultTemplate: '<h1>{title}</h1><h2 class="searchresults">{date}</span></h2>',
json: [JSON URL]
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
</div>
Any help will be very much appreciated, Thank you in advance.
Here is a very simple way of doing what you want using jquery:
$('#search-input').on('input', function() {
$('#search-result-container').css('display', $(this).val() !== '' ? 'block' : 'none')
});
#search-result-container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="search-input">
<div id="search-result-container">This will be hidden</div>
Based on both links you post:
HTML:
<input id="search-input" type="text" placeholder="Write here"/>
<div id="search-result-container" class="hide">
<p>
Results...
</p>
</div>
CSS:
.hide {
display: none
}
JS:
$('#search-input')
.on('keyup', function(e) {
var input = $(this).val();
input.length ?
$('#search-result-container').show() :
$('#search-result-container').hide();
})
JSFIDDLE
Use This Way:
<script>
// Your div id which you wants to hide
var hide = document.getElementById("yourDivId");
//Your input field id
var textarea = document.getElementById("YourInputFieldId");
//Simple Logic
if (textarea.value == "") {
hide.style.display = "none";
}
</script>
Related
I've tried seemingly every combination of .siblings, .parents().siblings, with and without $(this). or just 'this', and I can't for the life of me get jquery to select the sibling of an element that's clicked on.
Here's the relevant html:
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>
Here's the relevant jquery that i've gotten to work, but it selects and opens every single instance of that class on the page:
$('.opener').click( () => {
if(clickCount == 0){
$('.hideShow').css('visibility', 'visible');
$('.hideShow').css('position', 'static');
Any form of $(this), $(this > '.hideShow'), $(this).siblings(), or $(this).parents('.showButton').siblings() seems to have zero effect, whether it's my design or from the internet. The JS you see above is literally the only thing that will affect the page in any way.
I have multiple of these .opener classes on the page, and I'd just like to change the CSS on the sibling of the clicked element. Am I going about this the wrong way?
edit: It currently selects every instance of the class, as that's the only thing that works in any way.
$('.hideShow') will match all .hideShow, instead you need to use this and find the .hideShow within its parent.
$('.opener').click(function(e) {
const hideShow = $(e.currentTarget).parent().find('.hideShow');
hideShow.css('visibility', 'visible');
hideShow.css('position', 'static');
});
.hideShow {
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
Please use the below approach. Use next() to select the next element or prev() to select the previous element. And use normal function then arrow function to bind the this keyword.
jQuery(document).ready(function() {
let clickCount = 0;
$('.opener').click(function() {
if (clickCount == 0) {
$(this).next().css('visibility', 'visible');
$(this).next().css('position', 'static');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow' style="visibility: hidden;">Code tag</code>
</div>
When opener element click you need to first find the parent, for that you can use closest() and after that, you find the hideShow element and apply your CSS over that.
Try below code-
$('.opener').click(function() {
$('.hideShow').hide()
const hideShow = $(this).closest('.showButton').find('.hideShow').show();
});
.hideShow {
display: none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
<div class='showButton'>
<p class='opener'>Get The Code</p>
<code class='hideShow'>Code</code>
</div>
I am new to jQuery and need help for the following problem.
How can I read the text from div and print in alert at click function?
My html code:
<div>
<div id"test">text1</div>
select
<div id"test">text2</div>
select
<div id"test">text3</div>
select
</div>
$('a').on('click', function() {
var div = $(this).prev();
alert(div.text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="test1">text1</div> select
<div id="test2">text2</div> select
<div id="test3">text3</div> select
</div>
I'm trying to use jQuery click method to show and hide a part of my sections after clicking on a certain part of the page .
My HTML code:
<section class="apply_section text-center center-block" id="apply_section">
<div class="apply_container">
<div class="container">
<div class="row apply_row">
<div class="col-md-8 apply_form">
<form class="form" action="mail.php" method="POST">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="" required="required" name="firstName">
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<textarea class="form-control" placeholder="" required="required" name="message"></textarea>
</div>
</form>
<input class="btn btn-success btn-block" type="submit" value=""></input>
</div>
</form>
</div>
<div class="col-md-4 apply_image">
<a><img src="images/icon.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
The jQuery script :
$('#apply_section .apply_image a').click(function(){
if($('#apply_section .apply_form').css('display','none')) {
$('#apply_section .apply_form').css('display','inline-block');
}else {$('#apply_section .apply_form').css('display','none');}
});
The problem is that the clicking method take the order just for one time, If I click on the image the form will appear, but after that if I need to hide it again and clicking the image doesn't work!
That's not how you check css property.
$('#apply_section .apply_image a').click(function() {
if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none'
$('#apply_section .apply_form').css('display', 'inline-block');
} else {
$('#apply_section .apply_form').css('display', 'none');
}
});
Another way using toggle:
$('#apply_section .apply_image a').click(function() {
var boolean = $('#apply_section .apply_form').css('display') == 'none';
$('#apply_section .apply_form').toggle(boolean)
});
According to Jquery toggle docs:
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
A better way to do something like that is using a toggle to a class:
CSS
.hide {
display:none;
}
jQuery
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggleClass('hide');
});
Simplify your code using toggle():
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggle();
});
I have responsive Html website
I want to hide and show on click of next in simple html
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
here Q1 and Q2 are on the same page but
I want to show only one question at a one time but do not want to create multiple physical pages.
I tried using hide and show trick of css but I want to do it on simple html button click NEXT
want output like following
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
it will load Q2 on same page.
I tried not using one page with different pages like below.
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<nav>
<ul class="group">
<li>Q1</li>
<li>Q2</li>
</ul>
</nav>
<section id="main-content">
<div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
</section>
Using just Javascript you can do this fairly easily. Something like this should work:
HTML
<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>
CSS
#address {
display: none;
}
Javascript
document.getElementById('next').onclick=function(){
document.getElementById('address').style.display='block';
};
Here is a fiddle: http://jsfiddle.net/YJRbE/
Or, if you'd prefer to use jQuery, something like this:
$('#next').on('click', function() {
$('#address').show();
});
Here is a fiddle for the jQuery version: http://jsfiddle.net/XyNXq/
Here some example with jQuery which supports more than two questions:
Try to wrap all your questions in a div and use jquery for the click event so each time you click the button a next question will appear.
In this method you should include all your questions inside the wrapper div and set their display to none.
http://jsfiddle.net/ZFZfY/1/
Edit: http://jsfiddle.net/ZFZfY/3/
HTML:
<div class="questionWrapper">
<div class="question show" id="questionOne">
<label>foo bar?</label>
<input type="text">
</div>
<div class="question" id="questionTwo" style="display: block;">
<label>foo bar?</label>
<input type="text">
</div>
</div>
<a class="NextQuestion" href="#">Next Question</a>
CSS:
.question{ display: none;}
.show{ display: block;}
jQuery:
$('.NextQuestion').click(function(e){
e.preventDefault();
loadNext();
});
$('.PrevQuestion').click(function(e){
e.preventDefault();
loadPrev();
});
function loadNext(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).next().length > 0){
$(this).css('display','none');
$(this).next().fadeIn();
return false;
}
});
}
function loadPrev(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).prev().length > 0){
$(this).css('display','none');
$(this).prev().fadeIn();
return false;
}
});
}
here is script
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content').each(function() {
var $this = $(this);
$this.find(':not(.col:first,.active)').hide();
$('.col').children().removeAttr('style');
});
$("#add").click(function() {
$(".col:hidden:first").show("slow");
$('.col').prev().hide();
});
});
</script>
here demo html
<div class="content">
<div class="col">
<h3>What Is Your Name</h3>
<input type="text">
</div>
<div class="col">
<h3>What Is Address</h3>
<input type="text">
</div>
<button id="add" class="active">Add</button>
</div>
Hope this helps.
You can change the visibility of elements on button click like this.
document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';
Here is the working demo
I have tabs on my website, but sometimes the tab doesn't contain any info like this:
<div class="idTabs">
<div class="tabIt">
<a class="selected" href="#productDetails" name="Tab1">Description</a>
</div>
<div class="tabIt">
Specifications
</div>
</div>
<div class="productInformation">
<div class="information">
<div id="productDetails" style="display: block; ">
<div class="productInfo">
</div>
</div>
<div id="specs" style="display: none; ">
</div>
</div>
</div>
How can I make it shouldn't display the tabs if it doesn't contain any information?
Thanks
You'll probably need RegEx for that. Something like this:
<script type="text/javascript">
regex = /(\w)/;
// div to check to be empty
div = document.getElementsByClassName('productInfo')[0];
if(regex.test(div.innerHTML) === false){
document.getElementById('productDetails').style.display = 'none';
document.getElementsByClassName('tabIt')[0].style.display = 'none';
}
</script>
Same with jQuery:
<script type="text/javascript">
regex = /(\w)/;
div = $('div#productDetails div.productInfo').text();
if(regex.test(div) === false){
$('#productDetails').hide();
$('.tabIt').first().hide();
}
</script>
It will also hide the DIV if it contains only whitespaces.
Something like this:
<script type="text/javascript">
var tab2 = document.getElementsByName('Tab2')[0];
var specs = document.getElementById('specs');
if (tab2.className == '') specs.style.display = 'none';
</script>
You should use innerHTML to detect the HTML content within your div like this
<script type="text/javascript">
if (document.getElementById('specs').innerHTML == '')
document.getElementById('specs').style.display = 'none';
</script>