Develop Reference

JavaScript change the border from middle to left and right，use transition prototype？

I don’t want use or i don't know how to use 'the CSS:after prototype' by javascript .
Now, I change it is by add height not width,and when i remove the class prototype, reback is a short time,no transtion.
What can i do for it?
this is my codepen link
<div class="block">
<div id="top">my block/div>
<div>
<button id="btn">submit</button>
</div>
</div>
.block {
height: 200px;
width: 250px;
margin:150px auto;
text-align: center;
}
#top {
margin-bottom: 20px;
height: 30px;
display: inline-block;
border-bottom: 3px solid;
transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
}
.addtop {
border-bottom: 3px solid blue;
color: blue;
}
let btn = document.getElementById('btn');
btn.addEventListener('click',() => {
let topBlock = document.getElementById('top');
if(topBlock.classList.length > 0) {
topBlock.classList = [];
} else {
topBlock.classList.add('addtop');
}
});

Try this:
document.getElementById('top');
if(topBlock.classList.length > 0) {
topBlock.classList.remove('addtop');
} else {
topBlock.classList.add('addtop');
}
});
Also add to .top class:
border-bottom: 0px solid blue;

Toggle background color of same div

I am trying to toggle the background color of same div.
It does changes once (from blue to red) as expected.
But it is not able to toggle back to red and continue toggling between the 2 colors. I know I should use "==" in the first if-statement but when using "==" not even the first toggle works.
Any suggestions how to get the toggle to work repetitive?
function toggleFunction() {
var x = document.getElementById("box");
if (x.style.background == "blue") {
x.style.background = "red";
} else {
x.style.background = "blue";
}
}
.box {
background-color: blue;
width: 100px;
height: 100px;
margin: 30px 0px 0px 30px;
}
<div id="box" class="box" onclick="toggleFunction()"></div>

The simplest solution would to create a new class called red and toggle that using classList.toggle. The main advantage of this approach would be that you can toggle more CSS properties, if you use a class for toggling and this will also deduct the if-else comparison for you.
function toggleFunction() {
var x = document.getElementById("box");
x.classList.toggle("red");
}
.box {
background-color: blue;
width: 100px;
height: 100px;
margin: 30px 0px 0px 30px;
}
.red{
background-color: red;
}
<div id="box" class="box" onclick="toggleFunction()"></div>

$( ".box" ).each(function() {
$( this).click(function() {
$( this ).toggleClass( "red" );
});
});
.box {
background: blue;
width: 100px;
height: 100px;
margin: 30px 0px 0px 30px;
}
.box.red {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box" class="box"></div>
<div id="box" class="box"></div>

changing content from list items

I have a list of multiple items, a small image frame and with it all a description.
I need to bind a certain image + description to the list items, so if item5 is chosen it's showing one type of picture and description, and so on(all of them would be unique).
I am having a hard time figuring out how to do this since I'm new to js, I did try the basic, setting a class to an item, then in js fetching the class and changing the content.
Here I'm trying to change only the text, but that doesn't seem to be working out either: https://jsfiddle.net/8z37f15j/5/
HTML:
<div id="wrapper">
<div id="list">
<ol>
<li id="item1">items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
<li>items5</li>
<li>items6</li>
<li>items7</li>
<li>items8</li>
<li>items9</li>
<li>items10</li>
<li>items11</li>
<li>items12</li>
<li>items13</li>
<li>items14</li>
<li>items15</li>
</ol>
</div>
<div id="image-container">
<div id="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div id="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
CSS:
/* containers */
* {
font-family: Corbel;
}
#wrapper {
border: 1px solid red;
padding: 10px;
display: inline-flex;
}
#image,
#description,
#list {
border: 1px solid #472836;
box-sizing: border-box;
margin: 5px;
}
/* list */
#list {
width: 150px;
height: 250px;
background-color: #9AD2CB;
overflow-y: auto;
overflow-x: hidden;
}
#list ol {
list-style: none;
padding: 0;
margin: 0;
}
#list li {
padding: 5px;
}
#list li:nth-child(even) {
background-color: #91f2e6;
width: 100%;
height: 100%;
}
#list li:hover {
cursor: pointer;
color: red;
}
/* sub-container */
#image,
#description {
width: 150px;
height: 150px;
}
#image {
background-color: #D7EBBA;
}
#image img {
width: 100%;
height: 100%;
}
#description {
background-color: #FEFFBE;
overflow-y: auto;
overflow-x: hidden;
height: 95px;
}
JS:
var desc_area = document.getElementById('description');
var desc1 = "random text for desc1";
function item1(){
desc_area.innerHTML += desc1;
}

You can register each element as a key in a Map and create description and the source of an image for that element as a corresponding value (in this case object). I have registered only the first item but others can be done in the same way so right now you can click on the item1 and see the result.
const desc_area = document.getElementById('description');
const image = document.querySelector('img');
const item1 = document.querySelector('#item1');
const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, { desc: 'some description for item1', img: 'url/of/image' });
// you can bind on click handler for example
const list = document.querySelector('ol');
list.addEventListener('click', event => {
// if element that was registered in our map triggered the event
if (map.has(event.target)) {
// change text of description area
desc_area.textContent = map.get(event.target).desc;
// change src of the image
image.src = map.get(event.target).img;
}
});
/* containers */
* {
font-family: Corbel;
}
#wrapper {
border: 1px solid red;
padding: 10px;
display: inline-flex;
}
#image,
#description,
#list {
border: 1px solid #472836;
box-sizing: border-box;
margin: 5px;
}
/* list */
#list {
width: 150px;
height: 250px;
background-color: #9AD2CB;
overflow-y: auto;
overflow-x: hidden;
}
#list ol {
list-style: none;
padding: 0;
margin: 0;
}
#list li {
padding: 5px;
}
#list li:nth-child(even) {
background-color: #91f2e6;
width: 100%;
height: 100%;
}
#list li:hover {
cursor: pointer;
color: red;
}
/* sub-container */
#image,
#description {
width: 150px;
height: 150px;
}
#image {
background-color: #D7EBBA;
}
#image img {
width: 100%;
height: 100%;
}
#description {
background-color: #FEFFBE;
overflow-y: auto;
overflow-x: hidden;
height: 95px;
}
<div id="wrapper">
<div id="list">
<ol>
<li id="item1">items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
<li>items5</li>
<li>items6</li>
<li>items7</li>
<li>items8</li>
<li>items9</li>
<li>items10</li>
<li>items11</li>
<li>items12</li>
<li>items13</li>
<li>items14</li>
<li>items15</li>
</ol>
</div>
<div id="image-container">
<div id="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div id="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>

I think I know what you mean and could easily work with data attributes. Just add data attribute of the image path and then grab that and update your image with the data. Something like
<li data-imgsrc="/path/to/item2/image" data-desc="Description for the image 2">items2</li>
<li data-imgsrc="/path/to/item3/image" data-desc="Description for the image3">items3</li>
<li data-imgsrc="/path/to/item4/image" data-desc="Description for the image4">items4</li>
Just make one listener for the li elements and grab the imgsrc and the desc and put them in the dom where needed.

with javascript onclick add classname to a div

I want to achieve with javascript something like when i clink on any of thumbnail (btn-1, btn-2 and btn-3) the specific class should be add to box div dynamically.
my code: JSFiddle
document.getElementById('btn-1').onclick = function() {
document.getElementById('box').className = 'bg-1';
}
#box {
background-color: darkgray;
width: 200px;
height: 200px;
}
.thumbnail {
width: 30px;
height: 30px;
border: 1px solid;
margin: 5px;
position: relative;
float: left;
}
#btn-1 {
background-color: red;
}
#btn-2 {
background-color: green;
}
#btn-3 {
background-color: blue;
}
.bg-1 {
background-color: red;
}
.bg-2 {
background-color: blue;
}
.bg-3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box"></div>
<div class="thumbnail" id="btn-1"></div>
<div class="thumbnail" id="btn-2"></div>
<div class="thumbnail" id="btn-3"></div>

You javascript is working, but your CSS isn't.
You need to add !important as follows to .bg-1, .bg-2 and .bg-3
.bg-1 {
background-color: red !important;
}
Otherwise the id styling is taking preference over the class styling
You can see the classname is being added if you right click on the grey div and choose inspect element in Chrome.

Instead of bothering with classes, use simply a data- attribute like: data-bg="#f00"
$('[data-bg]').css('background', function () {
$(this).on('click', () => $('#box').css('background', this.dataset.bg));
return this.dataset.bg;
});
#box {
background: darkgray;
width: 120px; height: 120px;
}
[data-bg] {
width: 30px; height: 30px;
margin: 5px;
float: left;
}
<div id="box"></div>
<div data-bg="red"></div>
<div data-bg="#00f"></div>
<div data-bg="rgb(255,0,180)"></div>
<div data-bg="linear-gradient(to right, #E100FF, #7F00FF)"></div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

You want to use jquery .addClass() function:
$('.myButton').addClass('myNewClass');
The function would probably look something like this:
$(function () {
$('.thumbnail').click(function() {
$('#box').addClass($(this).attr('id'));
});
})

You can get all the thumbnails as an array, and then iterate through the array and dynamically add an event listener to each, which will add the desired className to box when clicked:
var thumbnails = document.getElementsByClassName('thumbnail');
Array.from(thumbnails).forEach(function(thumbnail) {
var id = thumbnail.id;
thumbnail.addEventListener('click', function() {
document.getElementById('box').className = id.replace('btn', 'bg')
});
});

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>