Remove validation and auto-select default thumbnail image - javascript
I am using a PHP script which has a module of Article Posting
User needs to select a thumbnail else it gives an error. I want to remove mandatory validation, and when user has not selected any Thumnail, then it should select a default image somewhere from directory.
PHP Page:
<div id="thumbselect" class="hide bd margin-bottom-20 box">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
<a title="<?= Lang::get('upload_thumb') ?>" class="sendimg upload-image tip" href="#"><i class="pe-none icon-upload2"></i></a>
</div>
<div class="rightbox">
<div class="preview cover"><img src="Template/Images/imgplaceholder.jpg" class="topimg sendimg" style="opacity: 1;"></div>
</div>
</div>
<div id="photocover" class="hide">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
</div>
<div id="thmb" class="rightbox bd">
<div id="thmbinner" class="preview"></div>
<i class="icon-angle-left"></i>
<i class="icon-angle-right"></i>
</div>
</div>
<div id="frameselect" class="hide">
<a id="setframe" class="bttn bttn-primary selectframe" style="display:block;margin:4px;"><?= Lang::get('select_another_frame') ?></a>
<div id="mp4preview" class="rightbox bd hide"></div>
</div>
JavaScript page
define(["jquery","utils","tinyMCE"],function(e,t){var n,a={File:t.Query("#file"),Tags:t.Query("#input-tags"),Form:t.Query("#submitArticle"),Thumb:t.Query("#thumbselect"),AddImg:t.Query(".sendimg")},r={Init:function(){t.ResetCache(),r.initMCE(),r.setEvents(),r.setPlugins()},initMCE:function(){require(["tinycfg","tinyMCE"],function(e){tinyMCE.init(t.Extend(e.extended,{file_browser_callback:function(e,t,r,i){"image"==r&&(n="art",a.File.click())}}))})},UploadFile:function r(){var i=new FormData,o=new t.NodeCache,s=new XMLHttpRequest,u=a.File.files[0],g=o.FindElems({line:"#progress-bar",total:"#progress-total",status:"#progress-status",progress:".progress"});r.progress=function(e){g.total.innerHTML=Lang.get("prefix_uploaded")+" "+(e.loaded/1048576).toFixed(2)+" "+Lang.get("of")+" "+(e.total/1048576).toFixed(2)+" MB";var t=e.loaded/e.total*100;g.line.value=Math.round(t),g.status.innerHTML=Math.round(t)+"%"},r.complete=function(a){var r=a.target.responseText,i=JSON.parse(r);"thumb"!=n?(e(g.progress).delay(2500).slideUp(1e3),"duplicate"==i.status?t.Info("error",Lang.get("note_error_head"),Lang.get("img_exists")):tinyMCE.activeEditor.execCommand("mceInsertContent",!1,'<img style="width: 100%" src=\'Uploads/Temp/'+i.userdir+"/"+i.filename+"'>"),g.status.innerHTML=Lang.get("img_uploaded")):t.Query(".topimg").src="Uploads/Temp/"+i.userdir+"/"+i.filename},r.error=function(e){g.status.innerHTML=Lang.get("an_error_occured")},"image/jpeg"==u.type||"image/png"==u.type?(g.line.value=0,"art"==n&&e(g.progress).slideDown(1e3),t.Info("info",Lang.get("please_wait"),Lang.get("uploading_img")),t.Query(".mce-close")&&t.Query(".mce-close").click(),i.append("file",u),i.append("option","thumbnail"),"thumb"==n&&i.append("hash","cover"),s.upload.onprogress=r.progress,s.addEventListener("load",r.complete,!1),s.addEventListener("error",r.error,!1),s.open("POST",t.Path.Image),s.send(i)):(t.Query(".mce-close").click(),t.Info("error",Lang.get("img_invalid_head"),Lang.get("img_invalid_ext")))},setPlugins:function(){e(a.Tags).tagsInput(),e(a.Thumb).fadeIn()},setEvents:function(){PubSub.subscribe("unload",t.ResetCache),a.File.addEventListener("change",r.UploadFile),a.Form.addEventListener("submit",r.Submit),a.AddImg.forEach(function(e){e.addEventListener("click",r.SendImage)})},SendImage:function(e){e.preventDefault(),n="thumb",t.Query("#file").click()},Submit:function(n){n.preventDefault();var i=t.ParseForm.call(this);return i.Data.type="article",i.Data.desc=tinyMCE.get("art_content").getContent(),e.ajax({type:"POST",url:t.Path.Subm,data:i.Data,beforeSend:function(){t.Loading(Lang.get("please_wait"))},success:function(n){t.Loading(Lang.get("please_wait")),1!=n?t.Info("error",Lang.get("an_error_occured"),n):(t.Query(".topimg").src="Template/Images/imgplaceholder.jpg",e(a.Thumb).hide(),t.Info("success",Lang.get("success"),Lang.get("post_submitted")),r.ResetForm()),t.Loading("close")}}),!1},ResetForm:function(){a.Form.reset(),tinyMCE.get("art_content").setContent("");for(var e=document.getElementsByClassName("tag");e[0];)e[0].parentNode.removeChild(e[0])}};r.Init()});
Thumbnail goes to /Uploads/Media/Mar19/Sat30/291/cover.jpg.
Related
Add multiple images with php and save it in mysql
Someone can help me please with this code? I would add multiple images but I can't figure it out.
I tried the multiple command but it doesn't worked, I have no clue honestly.
HTML code:
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data" data-abide>
<div class="photo-field">
<input type="file" name="file_img" pattern="^.+?\.(jpg|JPG|png|PNG|jpeg|JPEG)$" required>
<small class="error">Upload JPG or PNG only.</small>
</div>
<div class="title-field">
<input type="text" name="img_title" placeholder="Image title" required>
<small class="error">Image title is required.</small>
</div>
<input type="submit" value="Upload Image" name="btn_upload" class="button">
</form>
PHP code:
<li>Add Photo</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<br/>
<!--Content goes here-->
<div class="row">
<div class="large-12 columns">
<?php
if(isset($_GET['success'])) {
if($_GET['success']=="yes"){?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box success radius ">
Image "<?= $_GET['title']; ?>" uploaded successfully.
×
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box alert radius ">
There was a problem uploading the image.
×
</div>
</div>
</div>
<?php } }?>
The problem is, that there is no loop in the processing php script. So only one file gets uploaded. For more info and solutions see: Multiple file upload in php
Sub Menu nav in toggle button
Using bootstrap 4 the photos I included so you can see the side nav menu on full screen and then only what shows on the mobile view I highlighted the menus.
https://imgur.com/a/hv7JvZ9
I have a nav bar and then I made a submenu nav on the left side of the website. So the main navbar has login and logout and the side nav menu offers subcategories etc.
Everything looks great on fullscreen.
But on mobile view, the main navbar with login and logout show in the toggle button the sub side nav menu disappears completely. I have tried to add it to the navbar but the issue is its always there, I need it only on mobile view.
I also tried to move it to the top below the navbar on mobile again it's always there. I need to know the way to only make items change positions when on mobile or fullscreen, or if someone knows another workaround.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<div class="header">
<nav class="navbar fixed-top navbar-site navbar-light bg-light navbar-expand-md"
role="navigation">
<div class="container">
<div class="navbar-identity">
<a href="<?php echo base_url();?>posts" class="navbar-brand logo logo-title">
<span class="logo-icon"><img class="navbar-brand" src="<?php echo base_url(); ?>" width="100px" height="78px">
</span>Website<span> </span> </a>
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggler pull-right" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</div>
<ul class="navbar-collapse collapse">
<li class = "dropdown-item"><strong>Posts</strong></li>
<?php if(!$this->session->userdata('logged_in')): ?>
<li class="dropdown-item"><strong>Login</strong></li>
<li class="dropdown-item" ><strong></strong></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) :?>
<li class="dropdown-item"><i class=" icon-logout"></i><strong> Log out</strong>
</li>
<?php endif; ?>
</ul>
</li>
<li class="postadd nav-item"><a class="btn btn-block btn-border btn-post btn-danger nav-link" href="<?php echo base_url();?>posts/create">Blogg</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- /.header -->
<div class="search-row-wrapper" style="background-image: url(images/bg.jpg)">
<div class="inner">
<div class="container ">
<form action="#" method="GET">
<div class="row">
<div class="col-md-3">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row">
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version -->
<div class="col-md-3 page-sidebar mobile-filter-sidebar">
<aside>
<div class="sidebar-modern-inner">
<div class="block-title has-arrow sidebar-header">
<h5><span class="title">Categories</h5>
</div>
<div class="block-content categories-list list-filter ">
<ul class=" list-unstyled">
<li><span class="title">All Categories</span>
</li>
<li><span class="title">Female Escorts </span></li>
<li><span class="title">Massage Parlors and Rub Downs</span></li>
<li><span class="title">Trans and Gay Escorts </span></li>
<li><span class="title">Strip Clubs </span></li>
</li>
</ul>
</div> <!--/.categories-list-->
<div class="block-title has-arrow ">
<h5>Location</h5>
</div>
<div class="block-content locations-list list-filter ">
<ul class="browse-list list-unstyled long-list">
<li> Miami </li>
<li> Broward County </li>
<li> West Palm Beach </li>
<li> Florida Keys </li>
<li>Orlando </li>
<li> Jacksonville</li>
</ul>
</div>
</div>
</aside>
</div>
<!--/.page-side-bar-->
<div class="col-md-9 page-content col-thin-left">
<div class="category-list ">
<div class="tab-box ">
<!-- INSERTING THE CODE HERE TO LOOP-->
<?php
if (empty($posts)) {
echo '<div class="text-center">';
echo "<h3>";
echo "<strong>";
echo "No matching results at this time.";
echo "</strong>";
echo "</h3>";
echo "</div>";
echo '</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
</div>
</div>
</div>';
} else {
foreach($posts as $post):{ ?>
</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
<div style="clear:both"></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<ul class="list-unstyled list-inline no-margin no-padding">
<li class="filter-toggle">
<a class="">
<i class=" icon-th-list"></i>
</a>
</li>
<li>
</li>
</ul>
</div>
<div class="menu-overly-mask"></div>
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
<div class="col-md-2 no-padding photobox">
<div class="add-image"><span class="photo-count"><i class="fa fa-camera"></i> </span> <img class="thumbnail no-margin" src="<?php echo site_url();?>assets/images/posts/<?php echo $post['post_image']; ?>" alt="img">
</div>
</div>
<!--/.photobox-->
<div class="col-md-7 add-desc-box">
<div class="ads-details">
<h5 class="add-title"><a href="<?php echo site_url('/posts/'.$post['slug']); ?>">
<?php echo $post['title']." ---". $post['Number'];//TITLE OF THE POST>?></a></h5>
<span class="info-row">
<span
class="date"><i class=" icon-clock"> </i> </span> <small class="category">Location: <?php echo $post['Area']; ?> </small>
</div>
</div>
<!--/.add-desc-box-->
<div class="col-md-3 text-right price-box">
</div>
<!--/.add-desc-box-->
</div>
</div>
<!--/.item-list-->
<?php }endforeach; ?>
<?php } ?>
<!--/.photobox-->
<!--/.add-desc-box-->
<!--/.item-list-->
</div>
</div>
<div class="tab-box"><a href=""> <i class=" icon-star-empty"></i>
</a></div>
</div>
<div class="pagination-bar text-center">
<nav aria-label="Page navigation " class="d-inline-b">
<div class="pagination">
<?php echo $this->pagination->create_links(); ?>
</div>
</nav>
</div>
<!--/.pagination-bar -->
<div class="post-promo text-center">
<h2> Make a free account to post a add </h2>
<h5>Fast and easy</h5>
Post a Free listing now
</div>
<!--/.post-promo-->
</div>
<!--/.page-content-->
</div>
</div>
<!-- /.main-container -->
</div>
Honestly I didn't check in detail, usually html for bootstrap is a headache to read. However, I have something that might be of interest to your situation: css media queries. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp The concept being that you can define, according to the client's width and height, different css properties. Beside defining css rules to different screen sizes, you can define different media such as print and so on. In this way, you can make an element to look a certain way when there is a lot of space, and in a different way when there is not so much space. That is what bootstrap is based on. Play around with it. As a side note, I would recommend you to try isolate exactly the bits of code that are problematic. I usually try to re-write the code in order to have only the problem showing, and none of the unrelated stuff off. In this way you get better and more answers. ;)
How can I locate element for ecom application , where I have a product listing page , below is HTML:
I am new in webdriver automation field. I am trying to click on the first product in Product listing page but I am unable to locate any product element in order to click on it. Kindly help. Already tried google and stack overflow for answers but couldn't find one to solve my issue. My code: <div class="small-6 medium-4 large-3 columns category-product cat-grid grid-view clear-both" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" data-rating="" data-ptype="Bras" data-brand="Zivame" data-sku="B65707-Black" data-product-id="174254" style="height: 545px;"> <div class="image-wrapper" data-price="995" data-name="Zivame Bandage Moderate Pushup Strapless Bra-Black" title="Zivame `enter code here`Bandage Moderate Pushup Strapless Bra-Black">`enter code here` <div class="front pos-relative"> <a target="_blank" href="/zivame-bandage-moderate-pushup-strapless-bra-black.html?trksrc=category&trkid=Bras"> <img class="act-place lazy" data-small="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_small.jpg" data-original="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg" src="//cdn.zivame.com/media/zcmsimages/configimages/B65707-Black/1_medium.jpg" alt="Zivame Bandage Moderate Pushup Strapless Bra-Black" style="display: inline-block;"> </a> <div class="product-name"> </div> <div class="more-on icon-chevron-down pointer show-for-small-down"></div> <div class="mobile-controls show-for-small-down"> <div class="row product-details"> <div class="row"> <div class="row"> <div class="large-12 medium-12 small-12 columns more-actions show-for-medium-up"> <div class="check-size left text-center pointer" title="check sizes"> <i class="sel-product-color left pd-l10 pointer icon-palette" title="More colors in this"></i> <span class="fs-10 left color-count">1</span> <i class="show-similar left pd-l10 pointer icon-layers" title="More like this"></i> <div class="add-to-cart-btn mr-r10"> <span class="shortlist-item icon-heart left pointer" title="Add to Wishlist"></span> <span class="add-to-cart z-uppercase left pointer" title="Add to Cart">Add to Cart</span> </div> <div class="fav-count fs-10 ff-rr">216 people favorited this</div> </div>
close easy fancy box pop and show successful message as alert using contact form 7
I am using easy fancy box plugin to show contact form 7 in popup window and on successful submitting data.I am closing the pop up using on_sent_ok: "$.fancybox.close();",In additional settings of contact form 7, now i need to show popup of successful message on close, I tried "$.fancybox.close();alert('sucess');" but this will give alert box first than closing alert box the popup will also close, can someone please help me to show a alert box on close of fancy box?
I am new to JavaScript and WordPress.
Here is my html and javascript
<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
<div class="mdl-grid">
<div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
<?php the_field('demo'); ?>
<a href="#contact_form_pop" class="fancybox">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
</a>
<div style="display:none" class="fancybox-hidden">
<div class="fancy-main-container">
<div id="contact_form_pop" class="slate_contact">
<?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript below
<script>
$("#test").fancybox({
onClosed: function () {
alert('sucess');
})
});
</script>
Pass the onClosed option to the fancybox function.
i.e:
<a id="example1" href="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_b.jpg">
<img alt="example1" src="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_m.jpg">
</a>
$("#example1").fancybox({
onClosed: function() {
alert('sucess');
})
});
Updated
<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
<div class="mdl-grid">
<div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
<?php the_field('demo'); ?>
<a href="#contact_form_pop" id="test">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
</a>
<div style="display:none" class="fancybox-hidden">
<div class="fancy-main-container">
<div id="contact_form_pop" class="slate_contact">
<?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery .next().slideToggle() not working
I have am creating my own comments system from scratch. The comments themselves are dynamically generated from those in the database and for each comment I am appending a reply textarea and button for the user to post a reply to someone's comment.
The problem is that when I click the reply link it opens a reply box for each comment not just for the comment the user wishes to reply to.
The HTML:
<a class="comment-reply">Reply</a>
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- reply input textarea -->
<div class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
</form>
</div>
<?php } ?>
</div>
And the jQuery:
<script>
$(document).ready(function(e) {
//hide reply box on page load
$('.reply-box').hide();
//show each individual reply box on click
$('.comment-reply').click(function() {
//$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
$(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
});
});
</script>
What am I doing wrong?
edit
Ok this is the full HTML:
<!--POSTED COMMENT-->
<div id="comment-<?php echo $comment_id; ?>" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;"><?php echo $c_member_username; ?><small> <?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
<?php if($signed_in && $username == $c_member_username) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
<?php } else if($signed_in) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<?php } else { ?>
<small class="floatL">Sign in to reply to this comment</small>
<?php } ?>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
<?php } ?>
</div>
<!--END REPLY BOX-->
don't mind the styling, I am still prototyping
edit - added rendered page
<!--POSTED COMMENT-->
<div id="comment-139" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;">nicklaw<small> 9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
<small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
</div>
<!--END REPLY BOX-->
Maybe the following code will help, I am using the parentElement of the current element and then get the textarea that is in the same group. When attaching the click handler I use a div with class comments-container and attach on click only for anchors (second parameter in the .on function).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="comments-container">
<div class="comment">
Comment1
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment2
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment3
comment<br>
<textarea></textarea>
</div>
</div>
<script>
$("textarea").hide();
$(".comments-container").on("click","a",function(e){
e.preventDefault();
$("textarea").hide();
$(this.parentElement.getElementsByTagName("textarea")[0])
.stop().slideToggle("fast");
});
</script>
</body>
</html>
The problem is that the .reply-box is not at the same level in the DOM as the .comment-reply link that is clicked (i.e. not a sibling). If you see the documentation for .click you will see that it only searches the siblings.
I think you want the .parents(".media").next(".reply-box")