I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/
Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.
Related
I have a basic script which shows/hides a div. I'm using this for a drop-down menu.
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I'm looking for the div element to be hidden when the page loads instead of it showing and having to click it to toggle it.
Any help is appreciated!
Use display: none in div like below
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
or you can create a class and assign to the div.
<style>
.hide{
display:none;
}
</style>
<div id="myDIV" class="hide">
This is my DIV element.
</div>
Instead of CSS, you may also use JavaScript to manipulate the display of a web page by taking advantage of events, such as onload.
window.onload = function(){
document.getElementById("myDIV").style.display='none';
};
<div>
This is the first DIV element.
</div>
<div id="myDIV">
This is the 2nd DIV element.
</div>
<div>
This is the last DIV element.
</div>
Using the following methods, you tell the browser to ignore these elements on the page.
Use display none on the element eighter in HTML, or in CSS files.
<div style="display: none">
This is my DIV element.
</div>
Attribute hidden is also helpful.
<div hidden>
This is my DIV element.
</div>
So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.
my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.
I made this example up in jsfiddle: http://jsfiddle.net/yt88bsnf/1/
One section has a display of none, and the other is shown. What I am trying to accomplish is when the one of the h2 element is clicked, that section below becomes shown (unless it is already shown, then it would stay shown), and the other h2 element display changes to none (unless it already has a display of none).
Any help or suggestions would be greatly appreciated! Thanks
HTML:
<div id="container">
<h2>Section One</h2>
<h2>Section Two</h2>
</div>
<div id="section_one">
This is Section One
</div>
<div id="section_two">
This is Section Two
</div>
CSS:
#container{
overflow:hidden;
}
#container h2{
float:left;
margin-right:30px;
cursor:pointer;
}
#section_two{
display:none;
}
Check this fiddle
You can use jquery show() and hide(). For more information see W3Scools
And for the docs see here
show()
hide()
JS
$("#header1").click(function () {
$("#section_one").show();
$("#section_two").hide();
});
$("#header2").click(function () {
$("#section_two").show();
$("#section_one").hide();
});
HTML
<div id="container">
<h2 id="header1">Section One</h2>
<h2 id="header2">Section Two</h2>
</div>
<div id="section_one">This is Section One</div>
<div id="section_two">This is Section Two</div>
I've added each h2 an id (header1 and header2) and used that id to show and hide the divs respectively..Please Try it..
with jQuery you can use
$(document).ready(function() {
$('#button1').on('click', function() {
$('#section_one').show();
$('#section_two').hide();
});
$('#button2').on('click', function() {
$('#section_one').hide();
$('#section_two').show();
});
});
i added two id's to the h2's to reference them for the click event.
if you are using more than two sections you might want to use a loop to iterate through them and change their visibility. in that case you could also use the h2's index to check which section should be shown.
see FIDDLE
JS Fiddle Live Demo
An easy way to do it would be to wrap these in their individual parents like:
<div class="parent">
<h1>Section One</h1>
<p>Section One</p>
</div>
<div class="parent">
<h1>Section Two</h1>
<p style="visibility: hidden;">Section Two</p>
</div>
This way you can add multiple sections in your dom and this jQuery would be enough:
$(".parent").children("h1").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
});
Feel free to ask any questions in comments.
The following jquery code allows you to hide show the div's irrespective of the number of div's and also do not require additional id's to be created.
$("#container").on('click','h2',function(){//click on any h2 in container
//hide all div's having section id starting with section_
$("div[id^='section_']").hide();
//show the div which has index position equal to the clicked h2
$($("div[id^='section_']")[$(this).index()]).show();
});
See fiddle http://jsfiddle.net/3pmakwh4/
So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!
Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.
You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});