onClick action to show more information html, css, javascript - javascript

I have created html and css that looks something like this:
https://jsfiddle.net/jw7pfb1w/
As you can see, I made those boxes 300px in height, but I have more information, that is hidden with overflow: hidden;. Now I created a button
//html
<a id="show-more" class="show">Show More</a>
/css
.show {
display: block;
background-color: #75868E;
width: 100px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
margin: 20px auto;
cursor: pointer;
height: 15px;
padding: 10px 0;
}
And now I want to see all the information in those three boxes when I click the button. I tried something like this
I added this to css:
#model1.open {
max-height: 1000px;
//transitions
-webkit-transition: max-heigth 0.7s;
-moz-transition: max-heigth 0.7s;
transition: max-heigth 0.7s;
}
and this to javascript
var content = document.getElementByClassName(".model1");
var button = document.getElementById("show-more")
button.onclick = function(){
if(content.className == "open"){
content.className = "";
button.innerHTML = "Show More";
} else {
content.className = "open";
button.innerHTML = "Show Less";
}
};
But it does'not work. I am stuck. Can someone help me to make this work, please?

There's a handful of bugs with your code.
In your CSS, you refer to model1 as an id, but in your JavaScript you
refer to it as a class.
getElementByClassName should be getElementsByClassName with an s after Element. You will have seen this issue if you looked in your browser console. (ctrl + shift + i).
You don't include the . symbol in getElementsByClassName, so you should use the value modal1 instead of .modal1.
If you do use getElementsByClassName, you need to specify which element of that class to affect, otherwise all elements with that class will be effected, meaning clicking that button will show more and less of all the modals. I use jQuery, so I'm not sure what the pure JS alternative is, but you probably want to detect which .modal1 has a shared parent with the button that was clicked, or alternately put an attribute of which number button that is, and put the same attribute on the modal, and use that to tie the two elements behavior together.
This may not be a complete list of bugs, but these are the most obvious ones I see.

If i have only one element, then it works. See > https://jsfiddle.net/075tcezL/
But how do i make it show or hide all three elements at the same time when i
click the button?

Related

resizing a div element for a timeframe after a button is clicked. Do i use javascript or is there an easier way

Hi i a wondering what is the best way to resize a div for a time frame say 5 seconds after a button is clicked. what is the best solution to do this javascript or jquery
You will have to use javascript in order to do anything on the button click.
If it was me - I would add a class to the div on the click, and set a time out to remove the class. The class would have the altered styling that would affect the size of the div. In this demo - I am making the target div twice as big for a time of 2 seconds and then reoving the class to return the div back to ormal.
Note that there are numerous ways to alter the size of the div, but you will need to use javascript to trigger them. You don't need the jQuery library just this though- straight js can do it. You should investigate some of the funky CSS ways to affecting DOM elements to get a nice smooth transition or altertion.
function alterSize(type) {
var targetDiv = document.querySelector("#target-div");
targetDiv.classList.add(type);
setTimeout(function(){
targetDiv.classList.remove(type);
}, 2000)
}
#target-div {
height: 100px;
width: 100px;
border: solid 1px blue;
background: #efefef;
transition: all 0.5s ease-in-out;
}
#target-div.small {
height: 50px;
width: 50px;
}
#target-div.large {
height: 200px;
width: 200px;
}
<button type="button" onclick="alterSize('small')">Click me to decrease the size</button>
<button type="button" onclick="alterSize('large')">Click me to increase the size</button>
<hr/>
<div id="target-div">

Toggle Visibility Not Working (HTML/CSS/Javascript) [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am following this tutorial from W3Schools on how to build a slideshow using HTML, CSS, and Javascript. On the website I am developing, I would like the thumbnails at the bottom and the arrows on the sides to be initially hidden, until the user presses a button.
To do so, in the CSS file, I have set the visibility: hidden;. The CSS code for the class dot, which is the bottom thumbnail, is as follows:
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
visibility: hidden;
transition: background-color 0.6s ease;
}
In the Javascript action for the button, I have set the visibility of the document's elements under the class "dot" to visible, like so:
document.getElementsByClassName("dot").style.visibility="visible";
I have verified that this action is being triggered when the button is pressed through an alert() view. Every line of code seems to run as intended up until this command. Also, the thumbnails at the bottom (the "dot" elements) do not appear, so their visibility does not become visible as intended.
Any ideas on why this may be, or how I can fix it? Thanks a lot for your help!
This document.getElementsByClassName("dot") returns an array and you cannot apply a style attribute to the array.
I'll give you a couple ideas about how you might approach or reconsider this problem.
1) loop through the array and apply a style to each element
var elements = document.getElementsByClassName("dot")
for(var i = 0; i < elements.length; i++) {
elements[i].style.visibility = "visible";
}
2) give an ID to each class and call document.getElementById("someID")
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
document.getElementyById("one").style.visibility = "visible";
document.getElementyById("two").style.visibility = "hidden";
document.getElementyById("three").style.visibility = "hidden";
document.getElementsByClassName() will return an array.
If you have only one element you could use the first index in the array:
document.getElementsByClassName("dot")[0].style.visibility="visible";
Else if you have more that one:
var dot = document.getElementsByClassName("dot")
for(var i = 0; i < dot.length; i++) {
dot[i].style.visibility = "visible";
}

How to make css class turn back to before on click css jquery

so I have a <div> with a blue background color,with a jquery onclick event that changes color of that div to red. I was wondering how I could go about making the div background color change back to blue when the button is clicked again & turn back to red if click again and like that?
You need This.
$(".yourDiv").click(function () {
$(this).toggleClass("red");
});
Your CSS
.yourDiv{ background-color: #1E90FF; }
.yourDiv.red { background-color:#FF0000; }
I'm not sure what do you exactly mean by clicking twice, so I've made two possible solutions for you.
First box changes it's background to blue on one click and changes back into black, when clicked twice (double click).
Second box changes it's background with every click, one time it's green and one time it's yellow.
var box = document.getElementById('box'),
box2 = document.getElementById('box2'),
bool = true;
box.addEventListener('click', function(){
this.style.background = 'blue';
});
box.addEventListener('dblclick', function(){
this.style.background = 'black';
});
box2.addEventListener('click', function(){
if (bool) {
this.style.background = 'yellow';
bool = false;
} else {
this.style.background = 'green';
bool = true;
}
});
#box {
height: 100px;
width: 100px;
background: black;
margin: 5px;
}
#box2 {
height: 100px;
width: 100px;
background: green;
margin: 5px;
}
<div id='box'></div>
<div id='box2'></div>
your gonig to need to share some code for a sample on how your problem would be solved. But the most common way would be to have your jquery onclick event check the color of the div using code similar to:
var theColorIs = $('a').css("backgroundColor");
then having it change colors based on what the color currently is
You can use pass an empty string to .css in jQuery, like .css('background-color', '');, to clear previous value.
Jquery has a method called toggleClass which is ideal for this. You should also look at the toggle method.
<style>
.blue{
background-color: blue;
}
.red{
background-color: red;
}
</style>
<div class="blue">
....
</div>
<script>
$( ".blue, .red" ).click(function() {
$( this ).toggleClass("blue");
$( this ).toggleClass("red");
});
</script>
p.s. im typing on a phone
No jQuery necessary, all you need to do is add some styling to a CSS class and add/remove the class via Vanilla JavaScript.
let body = document.querySelector('body'),
box = document.querySelectorAll('.box');
body.addEventListener('click', function(e) {
let cl = e.target.classList;
if (cl.contains('box'))
cl.toggle('active');
});
.box {
background: blue;
display: inline-block;
margin: 5px;
height: 2.5rem;
width: 2.5rem;
}
.active {
background: red;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
binds click event to the parent element (in this case the body). This is important because instead of creating 5 click functions for the browser to handle, there's only one
because the click is attached to the body element, we have to look at what the event target was of the click (what was actually clickeD) in order to determine if it was a box (or just a body). We can determine if it was a box by checking for the class.
If you want to explore this more, remove the if statement and re-run the code. Then click on the white space. You'll notice that because we were not looking for boxes, it'll add the active class to any element that was clicked.
For even shorter code you can remove replace the whole if block with cl.contains('box') && cl.toggle('active');, which says "if the element has a box class, then toggle the active class"

show/hide div on click with JS and introduction

I'm fairly new to the front-end web developing sphere and I have only studied HTML/CSS for ~ a month and a half and just about 1 week or less into JS. Since I want to practice what I learn from different websites I make my own to test my knowledge. I want to apologize in advance if I am asking too many questions, but there aren't any people I know that I can share coding issues with.
So I wanted to make ( just for testing ) a show/hide div which is activated when you click a button with JS. I can make it show, but I wanted to try to make it hide/show with an "if/else" function. I thought my code was right but it doesn't seem to work and I can't find a solution. I'll share with you my code ( the part of it which I have problems with actually) and will be very grateful if you can help me find a solution.
HTML :
<button type="button" onclick="slide()" >Click Me</button>
<div class="divtest" id="dropdown">
<span>If you are seeing this, then your JS worked! </span>
</div>
The CSS ( some things are pointless, I just added them in to test a bit ):
.divtest {
position: absolute;
left: 25%;
bottom: 30px;
width: 50%;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
box-shadow: 5px 5px 10px 3px;
text-align: center;
padding: 40px;
margin: 0 auto;
font-family: Cooper, sans-serif;
font-weight: 100;
transition: 1s ease;
background-color: limegreen;
color: black;
display: none;
}
button {
position: absolute;
width: 50%;
left: 25%;
bottom: 130px;
padding: 10px;
border: 2px solid black;
background-color: limegreen;
box-shadow: 5px 5px 50px 3px;
color: black;
cursor: pointer;
font-family: Cooper, sans-serif;
font-weight: 100;
}
the JS:
<script>
function slide() {
var drop = document.getElementById("dropdown"); // declares the element with id="dropdown" as a var
var dropSetting = drop.style.display; // declares that the variable "drop"'s display property is also a variable
if (dropSetting == "none") { // if the current value of display = "none" ( which it is as u can see in the CSS)
dropSetting == "block"; // Then set it to "block"
}
else { // if the value of display != none
dropSetting == "none"; // then set it to "none"
}
}
</script>
If you have any questions towards the code or anything, please feel free to ask as this is a separate feature contained in my test website so it is not connected in any way to other elements/attributes. I tried this code first in another way (without declaring dropSetting as a var, just adding in a few lines in the if/else function ) but it still did not work.I don't think JS recognizes the "style.display" as a property because Brackets doesn't highlight it. Thank you very much for your time in advance, and I hope that soon I too will be able to help some people out with what I know!
Also - a side question - What are your thoughts on treehouse? I have heard very good things about them and I'm thinking about signing up to further my knowledge.
Have a nice day!
For code compatibility, try to use methods, no shortcuts, for attributes use:
var drop = document.getElementById("dropdown");
drop.setAttribute('style', 'display: block');
var display = drop.getAttribute('display'); //Here is all the inline css, better do like below:
And it is much better for a clean and faster code, make all css clases you need:
.hide{
display:none;
}
JS:
drop.classList.add('hide');
drop.classList.remove('hide');
drop.classList.toggle('hide');
Never used Treehouse, but for myself the best teacher is a good IDE for web like Atom of VScode, google Chrome console (F12), and those are your books:
-http://www.w3schools.com/js/js_examples.asp
-https://developer.mozilla.org/en-US/docs/Web/API/Element
And this is your teacher for questions:
stackoverflow.com
You dont need anything more.
PD: Your logic is ok, just don't get used to code shortcuts, they may not work in all environments. (like elem.attribute instead of elem.getAttribute(''))
Your code doesn't works because you didn't assign display property to appropriate value (block / none). you have used comparison operator("==") instead of equals ("=").
if (dropSetting == "none") { // if the current value of display = "none" ( which it is as u can see in the CSS)
dropSetting = "block"; // Then set it to "block"
}
else { // if the value of display != none
dropSetting = "none"; // then set it to "none"
}
"==" operator in your code will just return true/false without changing display property of the div.
The problem is that your dropSetting is not an object, just string. When you change it (if change) you don't change the object (style in this case). Try something like this:
var drop = document.getElementById("dropdown"); //get reference to the object
drop.style.display = drop.style.display == 'none' ? 'block' : 'none'; //if(...){do something}else{do something else}
Another possibility:
var dropStyle = document.getElementById("dropdown").style;
if(dropStyle.display == 'none'){
dropStyle.display = 'block';
}else
dropStyle.display = 'none';

Loss of CSS class after style update

I am applying a class (rShift) to a DIV that acts as a menu tab. The class gives it a :hover behaviour. On clicking the DIV, I bring in a menu on to the screen. On collapsing the menu, I loose the class and the :hover behaviour too.
I am using jQuery UI and have even tried .addClass('') to apply the lost class, but it did not work.
See it at: http://pastebin.com/hdb8Y2Ke | http://bharath.lohray.com/ftree/
When the page is initially loaded, you can see a tab at the top left corner of the page, just under the search box. On hovering the mouse it jumps out a few pixels. On clicking, the menu appears. On clicking the tab again, the menu collapses and the jump out effect is lost :-(.
What am I doing wrong?
The class is being added, but on click, you are applying an inline style to the leftmenutab directly via jquery. This style (left) overrides any styles you have in your style sheets.
I would remove the inline styles you are applying via jquery and add the styles you want to your css.
Create styles like this:
.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }
and remove these lines from your javascript:
$(".leftMenuTab").css("left", "+=100px");
$(".leftMenuTab").css("left", "-=100px");
Alternatively, add and remove classes from your leftMenuTab and leftMenu on click and style them through CSS. Something like this:
HTML:
<div class="leftMenu">Hello Menu</div>
<div class="leftMenuTab" data-state="collapsed">
<span class="charIcon"></span>
</div>
JS:
$('.leftMenuTab').click(function(e) {
$('.leftMenuTab,.leftMenu').toggleClass('expanded');
}
CSS:
.leftMenuTab .charIcon:after{
content:'>>';
}
.leftMenuTab.expanded .charIcon:after{
content:'<<';
}
.leftMenuTab {
background-color: #FFFFFF;
border-color: #000000;
cursor: pointer;
float: left;
padding-right: 5px;
position: absolute;
text-align: right;
top: 45px;
width: 30px;
z-index: 2;
left: -10px;
}
.leftMenuTab:hover {left:0;}
.leftMenuTab.expanded { left:100px;}
After you modify the style of the element, the style left: 0px; is left in the DIV, this neglated the effect of the hover.
This is the relevant code:
$('.leftMenuTab').click(function(e) {
temp = $(this);
if ($('.leftMenuTab').attr('data-state') == "collapsed") {
$(".charIcon", this).html("«");
$('.leftMenuTab').attr('data-state', 'expanded');
$(".leftMenu").css("left", "+=110px");
$(".leftMenuTab").css("left", "+=100px");
} else {
$(".charIcon", this).html("»");
$('.leftMenuTab').attr('data-state', 'collapsed');
$(".leftMenu").css("left", "-=110px");
$(".leftMenuTab").css("left", "-=100px");
$(this).addClass("rShift");
}
});
The quickest fix is to erase the left style instead of modyfing it (and you don't need to add the class again):
$('.leftMenuTab').click(function(e) {
temp = $(this);
if ($('.leftMenuTab').attr('data-state') == "collapsed") {
$(".charIcon", this).html("«");
$('.leftMenuTab').attr('data-state', 'expanded');
$(".leftMenu").css("left", "+=110px");
$(".leftMenuTab").css("left", "+=100px");
} else {
$(".charIcon", this).html("»");
$('.leftMenuTab').attr('data-state', 'collapsed');
$(".leftMenu").css("left", ""); //set to empty string
$(".leftMenuTab").css("left", ""); //set to empty string
//$(this).addClass("rShift"); //Not needed
}
});
Note: this was tested with a local copy from your web.

Categories