Toggle display shows the hidden element for a second - javascript

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
$(document).ready(function() {
$(".temp").hide();
$("#showme").on("click", function() {
$(".temp").show();
});
});

Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.
CSS:
.temp {
display: none;
}
HTML:
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
JS:
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});

You should use inline style tag in <p> tag like this:
<p class="temp" style="display: none;">This is temporary</p>
instead of hiding it from jQuery!
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="temp" style="display: none;">This is temporary</p>
<button id="showme">Show</button>
</div>

Related

Change color of parent div's color on a condition

I have a html code like below
<div class="class1">
<div class="class2">
<span class="span1"></span>
If the span with class="span1" has no value between begining and ending tags, I would like to change the color of div with class="class1"
However, span is filled with javascript after loading, so should I change the color with JS or CSS? Can anybody show me a way to do it?
I dont have any sample code to display because I am not sure how to start
To determine if specified element has nothing between tags, use html() function provided by jQuery. To change parent's style, use parent() and css() functions. To wait until the DOM is loaded, use ready() function.
$(document).ready(function() {
if (!$('.span1').html()) {
$('.span1').parent().css({ color: 'red' });
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<div class="class2">text
<span class="span1"></span>
</div>
</div>
document.getElementsByClassName("span1")[0].parentElement.parentElement.style.color = "green";
You can't "go up the dom" by css, only down, so you has to do it with js. Here is som sample code:
$(function(){
$(".span1").each(function(){
if($(this).html() == ""){
$(this).closest(".class1").css("background-color", "red")
}
})
})
span{
height: 10px;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="class1">
<div class="class2">
<span class="span1"></span>
</div>
</div>
<div class="class1">
<div class="class2">
<span class="span1">filled</span>
</div>
</div>
You can achieve this thing via jQuery using different functions css(),parents(),html().
You need to put your all code inside this $(document).ready() So this will be execute after all DOM data loaded.
For that You just need to use below code:
Html code:
<div class="class1">
<div class="class2">
Hello this is test message.
<span class="span1"></span>
</div>
</div>
And jquery code :
$(document).ready(function(){
$(".span1").html().toString().length > 0 ? $(".span1").parents(".class1").css("background-color","red") : $(".class1").css("background-color","yellow");
});
First we check the length if it's grater 0 then it will execute this
$(".span1").parents(".class1").css("background-color","red")
otherwise this:
$(".class1").css("background-color","yellow");
Here i have set background color using parents and you can directly apply via class name.
I hope this code will help you.

Change class by searching for the closest class

I want to change the class of my closest div after pressing a button. Let me make it more clear by showing some code. I have the following HTML:
<div class="wrapper">
<div class="title">
<div class="aa">-</div>
<div class="ab">-</div>
<div class="ac">-</div>
<div class="navigation">
Test link
</div>
</div>
<div class="content not_active">
<p>
Text
</p>
</div>
</div>
With the following CSS:
.active{
display:block;
}
.not_active{
display:none;
}
Now my goal is to find the closest div that has the class: .not_active and change that class after pressing on the hyperlink with class: navigation.
I tried it with jQuery with the following code:
$(function () {
$('.navigatie a').click(function () {
$(this).parent().parent().find('.not_active').toggleClass('active');
});
});
but with no succes. What I am doing wrong?
JSFIDDLE DEMO
It is because you are using .navigatie class instead of .navigation.
Here the JSFiddle.

slideToogle not working properly with dynamically generated elements

I have the following code:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>
And this is the script I use to display .item-child-desc:
$(document).ready(function(e) {
$(".hide-description").on("click", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
... that is initiated hidden:
.item-child-desc {
display: none;
}
item-inner-wrapper gets generated every time a button is pressed and Toggle Description is displayed in a new row.
The JavaScript code I tried to create is not really working. I tried many different approaches but nothing. It only makes the first row item disappear, the others the event doesn't work.
EDIT > RESOLVED
Either John's or Saar's version works fine and it must be put on . Otherwise the script will be copied together with the rows and executed n times. That's why it was not working properly when I clicked to show the div.
here is a fiddle that use jQuery event delegation:
http://jsfiddle.net/hz0q0yys/3/
$(document).ready(function(e) {
$("#container").on( "click", "a.hide-description", function(e) {
console.log(e.target);
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
Try event delegation this way
$(document).ready(function(e) {
$(document).on("click", ".hide-description", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
.item-child-desc {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>

How to show/hide single div only with jquery .slidetoggle

How to show/display a single one div only when user click with jquery
For example when user click the "Promo" the promo content will show,
and when user click "Sports" the sports content will display and the promo content will hide... so on
I have this working code but when I click it shows all the content at once.
HTML
<div class="clickto_showme">Promo</div>
<div class="showcontent">
<p> Content for promo </p>
</div>
<div class="clickto_showme">Sports</div>
<div class="showcontent">
<p> Content for Sports </p>
</div>
<div class="clickto_showme">News</div>
<div class="showcontent">
<p> Content for News </p>
</div>
CSS
.showcontent {
display: none;
}
JS
$('.clickto_showme').click(function() {
$('.showcontent').slideToggle('slow');
return false;
});
A working JSFIDDLE is here http://jsfiddle.net/jowa513p/2/
Use $(this) to manipulate the required element relative to the current element clicked; and next() to get the sibling.
$('.clickto_showme').click(function() {
$(this).next('.showcontent').slideToggle('slow');
return false;
});
Updated Fiddle

jquery show only child

I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});​
Anyone have a solution for this ?
Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.
Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
​
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.
Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/

Categories