Develop Reference

Issue with Javascript in Posting system

So, I have a posting system. When you type a post in the input field and click the submit button, the post displays with the help of PHP and AJAX.
Now on that post are stuff like a like button and comment button, and when you click the like button, it turns blue. Now, after making a post and the post displaying, clicking the like button will make it blue. However, let's say you make another post. For that post, everything works, except when you click the like button on the second or third post, it makes the like button on the first post only turn blue, similarly with the comment button. Also, the first post has a background color of silver (#C0C0C0), however any other post, like the second or third post, don't. They have no background color.
This stuff (turning blue on click) is accomplished using JavaScript. What I identified from this is that the JS isn't working for any other post besides the first post. To resolve this, I tried changing the position of the JS in the code because I thought it had something to do with the scope, but it didn't. Please help, with the JS and the background color issue.
PHP/HTML/CSS Code:
<style>
.textPost {
margin-top: 170px;
width: 650px;
height: 400px;
position: fixed;
background-color: #C0C0C0;
margin-left: 685px;
border-radius: 15px;
}
.textpostFormat {
margin-left: -640px;
position: fixed;
}
</style>
<div class="textPost">
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="textpostFormat" id="textpostFormat">
<img src="img/pfp.png" alt="pfp" onclick="location.href='profile.php'" class="textpostPFP">
<b><div class="textinfo"><?php echo $firstname . " " . $lastname ?></div></b>
<img src="img/options.png" alt="textpostOptions" class="textpostOptions">
<hr style="margin-top: 85px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<hr style="margin-top: 200px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<div class="textfeedbackBar" style="position: fixed">
<hr style="margin-top: 250px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<div class="textratingBar">
<div style="float: left; margin: 10px; cursor: pointer">1</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">2</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">3</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">4</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">5</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">6</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">7</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">8</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">9</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin-left: 275px; cursor: pointer; margin-top: 10px; position: fixed">10</div>
</div>
</div>
<hr style="margin-top: 320px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<img src="img/pfp.png" alt="commentpfp" onclick="location.href='profile.php'" class="textcommentPFP">
<input type="text" name="textComment" class="textComment" id="textComment" placeholder="Write a comment">
<p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p>
<div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 id="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 id="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 id="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'">
<h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed" class="textLike" id="textLike" onclick="textLikeClick()"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" id="makeComment" onclick="textCommentClick()"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>
<h2 style="margin-left: 290px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textReact" id="textReact"><i class="fa fa-smile" style="margin-top: 2px;"></i> React</h2>
<h2 style="margin-left: 432px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textShare" id="textShare"><i class="fa fa-share" style="margin-top: 2px"></i> Share</h2>
</div>
</div>
<div style="margin-left: 398px; margin-top: 236px">
<img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">
<img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 55px; margin-top: 32px; margin-left: 21px; position: fixed; cursor: pointer">
</div>
<?php
}
}
?>
</div>
<?php
}
}
?>
</div>
AJAX code (to display posts without page refresh):
function makePost() {
var postContent = $("#postContent").val();
if (postContent.length > 0) {
jQuery.ajax({
url:"yourposts.php",
data:{
postContent: postContent
},
type:"POST",
success:function(data){
if (data == "success") {
$("#textpostFormat").html(postContent);
}
}
});
}
}
Javascript code (for turning like button blue and stuff):
<script type="text/javascript">
function changetextUpvote() {
var textUpvoteImg = document.getElementById('textUpvoteImg');
if (textUpvoteImg.src.match("orangeupvote")) {
textUpvoteImg.src = "img/upvote.png";
} else {
textUpvoteImg.src = "img/orangeupvote.png";
textDownvoteImg.src = "img/downvote.png";
}
}
function changetextDownvote() {
var textDownvoteImg = document.getElementById('textDownvoteImg');
if (textDownvoteImg.src.match("orangedownvote")) {
textDownvoteImg.src = "img/downvote.png";
} else {
textDownvoteImg.src = "img/orangedownvote.png";
textUpvoteImg.src = "img/upvote.png";
}
}
function textLikeClick() {
document.getElementById('textLike').style.color = "blue";
}
function textCommentClick() {
document.getElementById('textComment').focus();
}
</script>

None of the elements here have an ID attribute. Identification of elements is done based upon inspecting the event.target and navigating around the DOM using querySelector, parentNode and perhaps other techniques such as nextElementSibling etc
The buttons all register a single eventlistener which forks logic based upon a data-set attibute.
document.querySelectorAll('[type="button"]').forEach(bttn=>bttn.addEventListener('click',function(e){
let img=this.parentNode.querySelector('img');
let text=this.parentNode.querySelector('textarea');
switch(this.dataset.action){
case 'upvote':
img.src='img/orangeupvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'downvote':
img.src='img/orangedownvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'comment':
text.focus();
let fd=new FormData();
fd.set('comment',text.value);
fetch('yourposts.php',{method:'post',body:fd})
.then(r=>r.text())
.then(text=>{alert(text)})
break;
case 'like':
this.classList.toggle('liked')
break;
}
}));
.liked{background:blue;color:white}
textarea:focus{background:pink}
.upvote{outline:2px solid green}
.downvote{outline:2px solid red}
<div class="textPost">
<!--
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
-->
<h1>Example data</h1>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #1</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>This is simply a comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #2</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Also a simple comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #3</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Guess what this is...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
</div>

Stripping all the hideous inline styles and replacing ID attributes with, in this case, simply data-id attributes to yield some example rendered markup like this below. This is NOT intended to be a final solution for you - you need to understand how you fit your functions within this because quite frankly the code given is chaotic.
within the click handler function if you supply the event as an argument to the function you can access event.target within the function. That event.target points to the element that initiated the click. From that point you can use DOM navigation techniques to find other nodes of interest.
document.querySelectorAll('.textpostFormat *[data-id]').forEach(n=>n.addEventListener('click',function(e){
switch( this.dataset.id ){
case 'textUpvoteImg':
changetextUpvote(e);
break;
case 'textDownvoteImg':
changetextDownvote(e)
break;
case 'makeComment':
textCommentClick(e);
break;
case 'textLike':
textLikeClick(e);
break;
}
}));
function changetextUpvote(e) {
alert(e.target)
}
function changetextDownvote(e) {
alert(e.target)
}
function textLikeClick(e) {
alert(e.target)
}
function textCommentClick(e) {
alert(e.target)
}
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #1</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #1</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #2</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #2</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>

Unable to show div content for onmouseover event, in expected area in IE 11, for only table rows

I have to show some links, on mouseover, on another link. I have few links aligned in table. For each of the links in the rows, I need to show a div with content near the link on which I mouse over, and being able to select/click them.
This is working fine in other browsers like firefox.
When I directly open the HTML file in IE11 browser, it is working fine, but when I run the file on a tomcat server, it is not.
However it does work outside of the table element.
Code:
<html>
<head>
<style type="text/css">
.dropdown-contentshow {
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-contenthide {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-contentshow {
display: block;
.dropdown:hover .dropdown-contenthide {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
text-align: left;
}
.dropdown-contentshow a {
padding: 3px 4px;
text-decoration: none;
display: block;
}
.dropdown-contentshow a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-contentshow {
display: block;
}
</style>
</head>
<br>
<br>
<center> Testing for MouseOver</center>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr onmouseover="document.getElementById('hi').className='dropdown-contentshow';"
onmouseout="document.getElementById('hi').className='dropdown-contenthide';">
<td>
<div class="dropdown">
<a onmouseover="document.getElementById('hi').className='dropdown-contentshow';"
onmouseout="document.getElementById('hi').className='dropdown-contenthide';" class="dropbtn"
href="#">Test Cases Report </a>
<div id="hi" class="dropdown-contenthide" onmouseover="this.className='dropdown-contentshow';"
onmouseout="this.className='dropdown-contenthide';"><!--sravani-->
<a target="_blank" id="java" href="http://syapamanu:8080/tooltip/demo1.html"> Java</a>
<a target="_blank" id="html" href="http://syapamanu:8080/tooltip/demo2.html"> HTML</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="dropdown">
<a onmouseover="document.getElementById('hi1').className='dropdown-contentshow';"
onmouseout="document.getElementById('hi1').className='dropdown-contenthide';" class="dropbtn"
href="#"> Setups Report </a>
<div id="hi1" class="dropdown-contenthide" onmouseover="this.className='dropdown-contentshow';"
onmouseout="this.className='dropdown-contenthide';"><!--sravani-->
<a target="_blank" id="java" href="http://syapamanu:8080/tooltip/demo1.html"> Java</a>
<a target="_blank" id="html" href="http://syapamanu:8080/tooltip/demo2.html"> HTML</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="dropdown">
<a onmouseover="document.getElementById('hi2').className='dropdown-contentshow';"
onmouseout="document.getElementById('hi2').className='dropdown-contenthide';" class="dropbtn"
href="#">My Tasks Report </a>
<div id="hi2" class="dropdown-contenthide" onmouseover="this.className='dropdown-contentshow';"
onmouseout="this.className='dropdown-contenthide';"><!--sravani-->
<a target="_blank" id="java" href="http://syapamanu:8080/tooltip/demo1.html"> Java</a>
<a target="_blank" id="html" href="http://syapamanu:8080/tooltip/demo2.html"> HTML</a>
</div>
</div>
</td>
</tr>
</table>
</html>
Can someone tell me what I am doing wrong?
Working case :
Not working case:

How to get element's object whose border is none using jQuery?

I have following markup, where I need to get the element whose border is none. And I have a jQuery code var $item = $('[style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;"]'); which is hard coded in the following condition it solves the problem but the inline css of class="item" is generated dynamically which is impossible to find what style attribute has. So, how can I solve the this problem i.e how can I get those elements which do not have border.
var $item = $('[style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;"]');
console.log($item.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-wrp">
<div class="item-wrp">
<div class="item" style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border-style: solid; border-width: 1px; border-color: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;">
<div class="cont1">
<div class="img-wrp" style="display: block;">
<a href="#">
<img style="width: 100%;" src="https://i.stack.imgur.com/17Uek.jpg" class=""></a></div>
</div>
<div class="cont2">
<div class="news-cat-wrp">
<span class="news-cat" style="color: rgb(157, 157, 157);"> Nationals</span>
</div>
<div class="news-tit-wrp">
द भ्वाइस अफ नेपाल र हाम्रो पात्रोबीच सहकार्य</div>
<div class="news-auth-wrp">
<div class="news-auth">
<a class="news-auth-link" href="javascript:void(0);">
<span class="news-auth-name" style="color: rgb(204, 204, 204);">John Deo</span>
</a>
</div>
</div>
<div data-title="Date" class="news-date-wrp">
<span class="news-date" style="color: rgb(204, 204, 204);">2018-09-06</span>
</div>
</div>
<div class="cont3">
<div class="news-sum-wrp">
<span class="news-sum" style="color: rgb(40, 40, 40);">
२१ भदाै, काठमाडौं । विश्वकै चर्चित गायन रियालिटी शो “द भ्वाइस” को नेपाली संस्करण (फ्रेञ्चाइज) द भ्वाइस अफ नेपाल र नेपालको सबैभन्दा बढी डाउनलोड भएको जीवनशैली एप हाम्रो पात्रोबीच पहिलो सिजनको एकापसी सहक...
</span>
</div>
<div class="news-btn-wrp">
<a class="news-btn" style="text-decoration: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0); color: rgb(255, 36, 0);" href="#">Read More</a>
</div>
</div>
</div>
</div>
<div class="item-wrp">
<div class="item" style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;">
<div class="cont1">
<div class="img-wrp" style="display: block;">
<a href="#">
<img style="width: 100%;" src="https://i.stack.imgur.com/17Uek.jpg" class=""></a></div>
</div>
<div class="cont2">
<div class="news-cat-wrp">
<span class="news-cat" style="color: rgb(157, 157, 157);"> Nationals</span>
</div>
<div class="news-tit-wrp">
द भ्वाइस अफ नेपाल र हाम्रो पात्रोबीच सहकार्य</div>
<div class="news-auth-wrp">
<div class="news-auth">
<a class="news-auth-link" href="javascript:void(0);">
<span class="news-auth-name" style="color: rgb(204, 204, 204);">John Deo</span>
</a>
</div>
</div>
<div data-title="Date" class="news-date-wrp">
<span class="news-date" style="color: rgb(204, 204, 204);">2018-09-06</span>
</div>
</div>
<div class="cont3">
<div class="news-sum-wrp">
<span class="news-sum" style="color: rgb(40, 40, 40);">
२१ भदाै, काठमाडौं । विश्वकै चर्चित गायन रियालिटी शो “द भ्वाइस” को नेपाली संस्करण (फ्रेञ्चाइज) द भ्वाइस अफ नेपाल र नेपालको सबैभन्दा बढी डाउनलोड भएको जीवनशैली एप हाम्रो पात्रोबीच पहिलो सिजनको एकापसी सहक...
</span>
</div>
<div class="news-btn-wrp">
<a class="news-btn" style="text-decoration: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0); color: rgb(255, 36, 0);" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>

This seems like a bad way of using jQuery to find objects. You should ideally be using a specific class/IDs on the items you want and then using that to select the element. eg: $('.mySpecificClass').
But, if for some reason, the markup is built somewhere else and you still want to do it. This should suffice
$('.item[style]').filter(function(){
return $(this).attr('style').includes('border: none')
})
Not perfect by a long distance, but should work in your case. In case you're on an older browser, replace includes with indexOf.

How can I reuse function and not keep repeating it?

I wrote a function to hide and show a tab when clicked using JavaScript. As I am adding tabs, I also add function to perform the task. I am sure there is a way to narrow this down so I don't have to create a new function each time and reuse the one I have.
Here is my JS (https://jsfiddle.net/ehwcma6j/1/):
<script type="text/javascript">
function showDiv() {
var info = document.getElementById('detailInformation');
if (info.style.display === "none") {
info.style.display = "block";
info.style.transition = "0.2s ease-out";
} else {
info.style.display = "none";
info.style.transition = "0.2s ease-out";
}
}
function showDiv2() {
var info2 = document.getElementById('detailInformation2');
if (info2.style.display === "none") {
info2.style.display = "block";
info2.style.transition = "0.2s ease-out";
} else {
info2.style.display = "none";
info2.style.transition = "0.2s ease-out";
}
}
function showDiv3() {
var info3 = document.getElementById('detailInformation3');
if (info3.style.display === "none") {
info3.style.display = "block";
info3.style.transition = "0.2s ease-out";
} else {
info3.style.display = "none";
info3.style.transition = "0.2s ease-out";
}
}
function showDiv4() {
var info4 = document.getElementById('detailInformation4');
if (info4.style.display === "none") {
info4.style.display = "block";
info4.style.transition = "0.2s ease-out";
} else {
info4.style.display = "none";
info4.style.transition = "0.2s ease-out";
}
}
</script>
And here is my html:
<div class="block" style="text-align: center;">
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 1</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv()" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 2</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv2()" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 3</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv3()" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 4</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv4()" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
</div>
It's probably very simple, I am only a beginner :)

Instead of repeating the similar function, allow it to take a parameter, e.g. the id
function showDiv(id) {
var info = document.getElementById(id);
if (info.style.display === "none") {
info.style.display = "block";
info.style.transition = "0.2s ease-out";
} else {
info.style.display = "none";
info.style.transition = "0.2s ease-out";
}
}
And for your click events, change them like this
onclick="showDiv('detailInformation2')"

function showDiv(id) {
var info = document.getElementById(id);
if (info.style.display === "none") {
info.style.display = "block";
info.style.transition = "0.2s ease-out";
} else {
info.style.display = "none";
info.style.transition = "0.2s ease-out";
}
}
//call function like
showDiv('detailInformation');
showDiv('detailInformation2');
showDiv('detailInformation3');
showDiv('detailInformation4');

I updated the fiddle: https://jsfiddle.net/ehwcma6j/5/
You want a function that takes an id, so that you can reuse the main logic of the function:
function showDiv(id) {
var info = document.getElementById(id);
if (info.style.display === "none") {
info.style.display = "block";
info.style.transition = "0.2s ease-out";
} else {
info.style.display = "none";
info.style.transition = "0.2s ease-out";
}
}
Then in the HTML, pass the id of the div, for example:
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
</div>

<script type="text/javascript">
function showDiv(id) {
var info = document.getElementById(id);
if (info.style.display === "none") {
info.style.display = "block";
info.style.transition = "0.2s ease-out";
} else {
info.style.display = "none";
info.style.transition = "0.2s ease-out";
}
}
</script>
HTML
<div class="block" style="text-align: center;">
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 1</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation1')" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 2</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 3</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation3')" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
<div>
<div style="padding: 10px 0 10px 0; float: left; width: 50%;">
<h1>Tab 4</h1>
</div>
<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation4')" type="button" value="More information" /></div>
</div>
<div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
<p>some text</p>
</div>
</div>

jQuery Accordion - Move the selected one up

Guys I'm doing a jQuery accordion kind of a thing using slide function. It works fine but i'm using this for a project which requires me to move the selected one to up or to first one.
Here's my HTML and jQuery
<ul class="inneraccordion">
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_offers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Offers (3)</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_play"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Set Top Box</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_sim"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Sim Cards</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_voucher"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Vouchers</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_pin"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">E-Pins</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-layers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Bundles</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
</ul>
jQuery -
jQuery(document).ready(function($) {
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e){
e.preventDefault();
var $this = $(this),
speed = 500;
if($this.hasClass('active') === true) {
$this.removeClass('active').next('.inneraccordionbox').slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active').next('.inneraccordionbox').slideDown(speed);
} else {
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
$this.addClass('active').next('.inneraccordionbox').delay(speed).slideDown(speed);
}
});
});
CSS incase if you need -
/* inner accordion */
.acc_head {
height: 90px;
border-bottom: 1px solid #e1e9ec;
}
.icon-divider, .acc_head_text {
display: flex;
align-items: center;
height: 90px;
padding:0 20px;
}
.icon-divider {
border-right: 1px solid #ececec;
}
.icon-divider div {
margin: 0 auto;
}
.icon-divider div::before {
font-size: 44px;
color:#3fb3ec;
}
.acc_head_text {
background: url('../images/plus.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
color:#444444;
font-family: "Gotham Medium", Arial, Helvetica, sans-serif !important;
font-size: 20px;
}
a.active .acc_head_text {
background: url('../images/cross.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
}
.inneraccordionbox {
height:300px;
position:relative;
display:none;
padding: 0px;
}
.inneraccordion li {
background: #fff;
display:block;
padding-right:10px;
list-style:none;
border: 1px solid #e1e9ec;
border-bottom: none;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
-moz-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
margin-bottom: 10px;
}
.inneraccordion li:last-child {
margin-bottom: 0;
}
Any idea how to achieve that?

I've added following code inside this - else if(a.hasClass('active') === false) condition. It moves the selected element 1 position upwards.
li = $(this).parent();
li.insertBefore(li.prev(li));
li.slideUp(500, function(){
//callback
}).slideDown(500);
To move the selected element to the top of your list, change li.insertBefore(li.prev(li)); to li.insertBefore(li.siblings(":eq(0)"));
Here is a Fiddle