We Keep Coding

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

onclick trigger doesn't work at first click

i made this button but it dosen't work at first click.
it is work when i clicked twice;;
is there anything that i miss?
or something wrong?
any help will be so appreciated :)
thanks!
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
if (gwbtn.style.height === "0px") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>

On first click the height property value is empty, add the condition to check empty:
if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice {
border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;
}
#discountprice:hover {
border: 1px solid black;
color:black;
}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>

The height property starts off as not set (i.e. empty). Setting it in the CSS doesn't mean there's a value in the JS style property in the DOM - that reads from the inline style property of the element.
If you account for that in your initial if then it will work fine:
if (gwbtn.style.height === "0px" || !gwbtn.style.height) {
Demo:
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
console.log(gwbtn.style.height);
if (gwbtn.style.height === "0px" || !gwbtn.style.height) {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>
Alternatively, you can use getComputedStyle to detect the style values of the element as computed when stylesheets are taken into account:
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
var st = getComputedStyle(gwbtn);
console.log(st.height);
if (st.height === "0px") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>

You have two states you need to cover "blank or zero" and "210".
You can craft the if logic differently to only use the fixed value, eg:
if (thing.style.height !== "210px") {
// it's blank or zero
} else {
// it's 210
}

Javascript is not working after adding some functions

I was working on project which required to change background color of webpage when user hover mouse on a textfield and whole webpage theme must change when mouse pointer is on that textfield. It worked well but when I added a submit button and made a function to change its properties on mouse over and on mouse out, whole Javascript code stopped working!
<!DOCTYPE html>
<?php
function redirect($url){
ob_start();
header('Location: '.$url);
ob_end_flush();
die();
}
$error = "";
$myurl = $_SERVER['REQUEST_URI'];
if (isset($_GET['name'])) {
$name = $_GET['name'];
} else {
$name = "";
}
//$name = $_GET["name1"];
$name = trim($name);
if(empty($name)){
$error="";
}else{
echo $myurl;
}
?>
<html>
<head>
<title>We Wish</title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css?family=Comfortaa:700&display=swap');
body{
background-color: #1a1a1a;
}
input{
background-color: transparent;
border-radius: 50px;
border: 1.5px solid white;
}
#pallete{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#nametf{
width: 200px;
height: 20px;
padding: 5px 10px;
color: white;
font-size: 15px;
font-family: 'Comfortaa', cursive;
}
#nametf:hover{
border: 1.5px solid #1a1a1a;
}
#btn{
color: white;
font-family: 'Comfortaa', cursive;
background-color: transparent;
border: 1.5px solid white;
border-radius: 50px;
padding: 9px 20px 8px 20px;
margin-top: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
cursor: pointer;
transition-duration: 0s;
}
#btn:hover{
color: #1a1a1a;
background-color: cyan;
border-color: cyan;
box-shadow: 0px 0px 15px cyan;
}
</style>
</head>
<body>
<center>
<div id="pallete">
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onmouseover="bgChange('white','#1a1a1a')" onmouseout="bgChange('#1a1a1a','white')" onchange="widen()" value="" required>
</form>
<span>
<input type="submit" name="submit" id="btn" value="CREATE" onmouseover="glow('on')" onmouseout="glow('off')">
</span>
</div>
</center>
</body>
<script type="text/javascript">
var nametf = document.getElementById('nametf');
function bgChange(bg,color){
document.body.style.background = bg;
nametf.style.color = color;
var btn = document.getElementById('btn');
if(bg=='white'){
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid #1a1a1a";
btn.style.color = "#1a1a1a";
} else {
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid white";
btn.style.color = "white";
}
}
function widen(){
var value = nametf.value;
if(value.length > 17){
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
function glow(mode){
if(mode=='on'){
btn.style.transition-duration = "0.4s";
btn.style.color = "#1a1a1a";
btn.style.background-color = "cyan";
btn.style.border-color = "cyan";
btn.style.box-shadow = "0px 0px 15px cyan";
} else {
btn.style.transition-duration = "0.4s";
btn.style.color = "white";
btn.style.background-color = "transparent";
btn.style.border-color = "white";
btn.style.box-shadow = "0px 0px 0px transparent";
}
}
</script>
</html>
I even tried alerting a message without any function but still it didn't work!!

btn.style.transition-duration is going to be the first place where you're getting issues. you can't have a dash in a property name just bare like that. Try changing those properties with dashes in them in another way
btn.style['transition-duration'] may work, I'm not 100% sure, but I am sure that the dashes are creating basically a syntax error.

You are assigning values to property that has hyphen in them ( - ). In Javascript, this is not allowed.
You should change the property assignement that has hyphen ( btn.style.transition-duration = "0.4s"; for example) to use CamelCase
instead.
btn.style.transitionDuration = "0.4s";
This might fix one of your problems. There might be more, but we can't be sure until you tell us if there is any error in the JS console and what they are.

Child div element managing

var arrlength;//////////////////////////////////////////////////////////////////
function opentextarea(borderColor) {
var arr = document.getElementsByClassName("myCustomTextarea");
arrlength=arr.length;
var goOut= 1;
Array.prototype.forEach.call(arr, function(el) {
if (el.style.backgroundColor!=='lightblue'){
goOut=0;
alert("Enter or delete the previus commnet!");
}
});
if (goOut===1){
//////////////
var comentwindow = document.getElementById("StatusID"); //StatusID
var d1 = new Date();
var d2= d1.toDateString();
var d3= d1.toLocaleTimeString();
var dateTimeUser = document.createTextNode(d2+" "+d3+" username");
//dateTimeUser.style.fontSize = "8px";
dateTimeUser.className = 'dateTimeUserClasN';
dateTimeUser.id = arrlength+"dateTimeUserID";
comentwindow.appendChild(dateTimeUser); /////////////////////////////////////////1
var input = document.createElement('textarea');
input.maxLength = 5000;
input.cols = 28;
input.rows = 5;
input.style.borderColor = borderColor;
input.className = 'myCustomTextarea';
var arr = document.getElementsByClassName("myCustomTextarea");
input.id = arrlength+"textarea";
//var comentwindow = document.getElementById("StatusID"); //StatusID
comentwindow.appendChild(input);//////////////////////////////////////////////////2
var ele = document.getElementById(arrlength+"buttonSE");
if(ele === null){
var buttonSE = document.createElement('button');
buttonSE.className = 'enterCommentBut';
buttonSE.id=arrlength+"buttonSE";
buttonSE.onclick = function() {
if(document.getElementById(arrlength+"textarea").value != ''){
document.getElementById(arrlength+"textarea").style.backgroundColor= "lightblue";
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
e1.removeChild(e1.children[e2-1]);
e1.removeChild(e1.children[e2-2]);
}else{
alert("It is not posible to enter empty comment.");
}
}
var SE = document.createTextNode("Enter");
buttonSE.appendChild(SE);
comentwindow.appendChild(buttonSE);/////////////////////////////////////////////3
}
var ele2 = document.getElementById(arrlength+"buttonSC");
if(ele2 === null){
var buttonSC = document.createElement('button');
buttonSC.className = 'clearCommentBut';
buttonSC.id=arrlength+"buttonSC";
buttonSC.onclick = function() {
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
var myNode = document.getElementById("StatusID");
while (myNode.lastChild) {
myNode.removeChild(myNode.lastChild);
}
};
var SC = document.createTextNode("Clear");
buttonSC.appendChild(SC);
comentwindow.appendChild(buttonSC);//////////////////////////////////////4
}
}
}
function createObject2(){
var e3 = document.getElementById("StatusID");
var e4 = document.getElementById("Status0ID");
var e5 = document.getElementById("Status2ID");
e3.style.display = 'block';
e4.style.display = 'block';
e5.style.display = 'block';
}
document.getElementById("clickMe2").onclick = createObject2;
function updateScroll(){
var element = document.getElementById("StatusID");
element.scrollTop = element.scrollHeight;
}
function ObjectRed(){
var borderColor= "red";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectRed").onclick = ObjectRed;
function ObjectGreen(){
var borderColor= "green";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectGreen").onclick = ObjectGreen;
*,
*::before,
*::after {
box-sizing: border-box;
}
div.Status0 {
position: absolute;
top: 15px;
width: 250px;
height:40px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Status1 {
position: absolute;
top: 70px;
width: 250px;
height:700px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Coment1{
float: left;
width: 130px;
height:100px;
margin: 0;
padding: 1em;
font-size: 12px;
/* height: 100%;
overflow: auto;*/
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: yellow;
}
.content {
padding: 18px 0;
border-bottom: solid 2px #cfcfcf;
}
.myCustomTextarea {
border:0;
padding:1px;
font-size:1.0em;
font-family:"Times New Roman";
color:black;
border:solid 2px #ccc;
margin:0 0 4px;
width:215px;
height:50px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.myCustomTextarea:focus {
resize: none;
border-radius: 5px;
outline: none !important;
}
.dateTimeUserClasN{
}
.startbutton{
position: absolute;
left: 270px;
top:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom </title>
</head>
<body>
<div class="Status0" id="Status0ID" style="display: none">
<input type="button" id="ObjectRed" value="Problem" />
<input type="button" id="ObjectGreen" value="Okay" />
</div>
<div class="Status2" id="Status2ID" style="display: none">
<div class="Status1" id="StatusID" style="display: none"></div>
</div>
<input class =" startbutton" type="button" id="clickMe2" value="New object2" />
<script src="js/createObject.js"></script>
<link rel="stylesheet" href="css/styleIvan.css">
</body>
</html>
I have a "div" inside main "div". Status1 inside Status2. Status1 has a time date text, textarea and two buttons (enter and cancel).
When I call opentextarea function I get this 4 elements.
Below is this code for comments managing. The problem is that when i press on "cancel" button. It deletes all. But i would like to delete only last packet of
4 elements (last Status1 div). I need Status1 to be child of Status2. So when i press on cancel to delete only last child.
I can not make this work for me, so I am asking here for help.
How to do it?

How to hide css while clicking another

I want to hide black arrow while clicking green arrow.. without using jquery
My fiddle:
http://jsfiddle.net/t5Nf8/195/
html:
<div class="arrow-down"></div>
<div class="arrow-up"></div>
css:
.arrow-down {
position: absolute;
/*display: none;*/
left: 1.5px;
top: 6px;
z-index: 1;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
.arrow-up {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
position: absolute;
left: 1.5px;
top: 14px;
z-index: 1;
height: 0px;
width: 0px;
}
js:
$('.arrow-up').click(function {
$('.arrow-down').hide();
});
Please anyone help

$('.arrow-down').click(function(){
$('.arrow-up').toggle();
});
$('.arrow-up').click(function(){
$('.arrow-down').toggle();
});
You had a syntax error in your Code after function you should have
() which you missed in your Code
I Have used toggle so that it shows and hides but you can use hide alone if you want.
DEMO

According to #JoeFitter's answer, you can toggle the "upArrow" to show and hide by clicking the "downArrow" using JavaScript
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
if(upArrow.style.display == 'none'){
upArrow.style.display = 'block';
}
else{
upArrow.style.display = 'none';
}
});
Live Demo

var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});
http://jsfiddle.net/t5Nf8/197/

Use getComputedStyle(el).getPropertyValue("display"); to get the value of dispaly, after, you just do a test to show or hide your arrow!
Note: it's a pure Javascript, no library:
var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
up.style.display = 'block';
} else {
up.style.display = 'none';
}
Want to watch it in action? See demo: http://jsfiddle.net/g4g9doj0/

I don't think it is a simple task JUST using CSS, using Jquery should look like:
I don't know but I see useless CSS instructions, I think it could be reduce to:
.arrow-down {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
height: 0px;
width: 0px;
}
.arrow-up{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
Jquery would look like:
$(document).ready(function(){
$(".arrow-up").click(function(){
$(".arrow-down").hide();
});
});
http://jsfiddle.net/t5Nf8/209/