We Keep Coding

How make a textarea with tags in react that have clickable dropdown

Id like to make a component in react that allows me to have a textarea with tags that can be inserted when clicked from a dropdown. Id also like this textarea to be able to mix text aswell. I have currently been trying to use tagify with react but I cant seem to figure out a way to the tagify's function that adds the tag to be accessed by the onClick that is connected to the dropdown.
Any ideas?

I believe you can get your answer in this URL of other question asked on StackOverflow https://stackoverflow.com/a/38119725/15405352
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
// yeah, browser sniffing sucks, but there are browser-specific quirks to handle that are not a matter of feature detection
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
// iOS adds 3px of (unremovable) padding to the left and right of a textarea, so adjust highlights div to match
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
$toggle.on('click', function() {
$container.toggleClass('perspective');
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #f0f0f0;
}
.container, .backdrop, textarea {
width: 460px;
height: 180px;
}
.highlights, textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
button {
display: block;
width: 300px;
margin: 30px auto 0;
padding: 10px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
}
.perspective .backdrop {
transform:
perspective(1500px)
translateX(-125px)
rotateY(45deg)
scale(.9);
}
.perspective textarea {
transform:
perspective(1500px)
translateX(155px)
rotateY(45deg)
scale(1.1);
}
textarea:focus, button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>
<button>Toggle Perspective</button>
Reference- https://codepen.io/lonekorean/pen/gaLEMR for example

How to get style of clicked element - "currentTarget" [duplicate]

This question already has answers here:
Get a CSS value with JavaScript
(8 answers)
Closed 1 year ago.
currentTarget works when I add style the html element. How can I access the style file of the clicked element without without adding style the html element?
const all = document.querySelectorAll(".all");
all.forEach((button) => {
button.addEventListener("click", (e) => {
let bgColor = e.currentTarget.style.backgroundColor;
console.log(bgColor);
});
});
div {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}
<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>
https://jsfiddle.net/bcz0t6gx/⁣⁣⁣⁣⁣
⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

Use window.getComputedStyle() to get the CSSStyleDeclaration of the element and getPropertyValue() to get the value of the CSS property:
const all = document.querySelectorAll(".all");
all.forEach((button) => {
button.addEventListener("click", (e) => {
let bgColor = window.getComputedStyle(e.currentTarget).getPropertyValue("background-color");
console.log(bgColor);
});
});
.all {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}
<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>

You can use window.getComputedStyle to find styles applied to an element. The following getStyle function makes this simple.
const getstyle=function(n,css){
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
};
document.querySelectorAll(".all").forEach((button) => {
button.addEventListener("click", (e)=>{
console.log( getstyle(e.currentTarget,'background-color') );
});
});
.all {//changed this to prevent console becoming weird
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}
<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>

accordion not applying the class to the next element

I have an accordion on my website which is working but when i click one of the buttons all of the elements with the same class get given the toggle not just the next element
i have the following CSS
button.flxaccordion {
background-color: rgb(255, 231, 217);
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid 0px;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
}
button.flxaccordion.active,
button.flxaccordion:hover {
background-color: rgb(233, 93, 15);
}
button.flxaccordion:after {
content: '\25bc';
font-size: 13px;
color: rgb(233, 93, 15);
float: right;
margin-left: 5px;
}
button.flxaccordion.active:after {
content: "\25b2";
color: rgb(255, 231, 217);
}
.flxpanel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
.flxpanel.show {
opacity: 1;
max-height: 500px;
}
.flxpanel.hide {
opacity: 0;
height: 0;
}
and the following code on my page
<p><button class="flxaccordion">Satellite</button></p>
<div class="flxpanel">
<p>Multi disc Floor Grinders and Polishers with passive or active heads</p>
</div>
<p><button class="flxaccordion">Meteor</button></p>
<div class="flxpanel">
<p>Small Single Head Floor Grinders</p>
</div>
<p><button class="flxaccordion">GrinderTec</button></p>
<div class="flxpanel">
<p>Hand Held Floor Grinders</p>
</div>
<script type="text/javascript">// <![CDATA[
var acc = $(".flxaccordion"); //jquery flxaccordion
acc.click(function() //when we click on element
{
$(this).toggleClass("active"); //it is active
$('.flxpanel').not($(this).next()).toggleClass("show");
});
// ]]></script>
I think i have confused some elements here but it seems to show every element after each button.
I need to change the toggleClass("show"); to toggleClass("hide"); and add another line to make it so it changes the element after the active button to toggleClass("show");.
Any suggestions?

Your jquery script needs to change something like below:
$(document).ready(function(){
var acc = $(".flxaccordion"); //jquery flxaccordion
acc.click(function() {
$(this).toggleClass("active");
$(this).parent().next().toggleClass('show');
});
});

changing link image on hover

my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page.
I am trying to use an image for a link, and would like the image to change when you hover over it. The link below is what I am trying to accomplish, but for whatever reason when I substitute my code from my page to it, it doesn't work.
EXAMPLE http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover
I am completely lost now and just need a little help. Here is my code.
DEMO
function hoverImg(x) {
x.style.backgroundImage = "url(image/arrowBtnHover.png)"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.style.backgroundImage = "url(image/arrowBtn.png)"
}
#header {
background-color: #473D39;
height: 100%;
width: 100%;
display: table;
position: absolute;
z-index: 10;
}
#wrapper {
display: table-cell;
vertical-align: middle;
}
#header h1 {
text-align: center;
margin: 0px;
font-size: 80px;
padding-top: 5%;
font-weight: normal;
color: #FFF;
letter-spacing: 18px;
text-transform: uppercase;
}
#header h5 {
text-align: center;
color: #FFF;
margin: 15px 15px 50px;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
<div id="header">
<div id="wrapper">
<h1>Premier Webster</h1>
<h5>Local Web Design For The Profesional In You</h5>
<img onmouseover="hoverImg(this)" onmouseout="normalImg(this)" src="image/arrowBtn.png" />
</div>
</div>

Please take a look at https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition
div.smile {
background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
cursor: pointer;
}
div.smile:hover {
background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
transition: ease 0.5s;
}
<div class="smile"></div>

You should be changing the src attribute instead:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this.

Since it's an image, you need to change it's src property, not it's CSS.
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}

Regex not working in one circumstance [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code is an excerpt from a larger project, but I have tried to pull out the relevant material and provide that only.
I have a project, and the part that I need help with is this:
Product codes are generated by users via a series of drop-downs and radio buttons. The one part that will always stay the same is that there is a
(x11)
at the end of each line with a product number, where 11 represents the quantity of the product code, and will also change.
A demo of the relevant code is available at This Fiddle.
My problem is this: the deleteItem() function works when the code is displayed as
ca-fefefsefef (x45)
but not when I tried to change the format to display the quantity as
ca-fjeoisfne Qty. 78
(The difference being in the way the quantity is displayed, not the code itself)
All of the product codes are examples, are not real, and the actual codes will vary in length and content. The quantity of each product code will change as well.
I suppose what I am asking for is a new regex to replace the old one in the deleteitem() function, but this regex needs to work with
Qty. 23
where 23 is the quantity, and will change from code to code.
Basically, the selection of code that I have provided at the fiddle is designed to display each product code and its corresponding quantity in a drop down. The codes are stored in an array, as well as the quantities(in a separate array). The purpose of the deleteitem() function is when the delete button is clicked next to a product code and quantity, it not only deletes the product code and quantity from the drop-down, but it also deletes the corresponding items in the product_codes and quantities arrays. (with the help of the removetextfromarray() function)
Make sure to watch the web console, it will display the arrays before and after the items are deleted. You'll note that when the quantity is displayed as (x99), it works, but if you change it to Qty. 99, it removes the items from the dropdown, but does not remove the corresponding items from their arrays.
So what I need is a new regex to replace the old one (or possibly a new/updated deleteitem() function that will work with the quantity display format as
Qty. 3
instead of
(x3)
and will delete both the items both from the drop down, and delete the two items from their corresponding arrays.
Please keep in mind the following: The product codes in the array, and the quantities in their own array will change, the ones I have provided are examples. There may be more than three, and they will change in length. I am also unable to use Jquery.
If you can spare the time, I would love any help you can give. I've spent literally hours trying to build new regexes that will work, trying to uncode the existing one (I didn't write it) and such. A working fiddle would be absolutely GREAT. Thanks so much for any help.
If I'm not being clear, please comment and I'll be happy to answer any questions about it or make updates. Thanks again!

How about this: /\w*Qty\. \d+$/
(see example here https://jsfiddle.net/xes3eLxp/1/)
That means, match:
Zero or more white space characters (\w*),
Qty. (Qty\.),
A single space (),
One or more digits (\d+),
The end of the line ($).
Consider the sample string: "ckj-fjeieofj Qty. 56"
The above regex would match Qty. 56
product_codes = ['cr-rttrnhuj3', 'ckj-fjeieofj', 'jjff-cr-sd'];
quantities = ['2', '56', '98'];
myfunction = function () {
document.getElementById('cart_body').innerHTML = '';
cart_text = '';
emp = '<div class="close_button" onclick="deleteItem(this)">x</div>';
open_span = '<span class="close_span">';
close_span = '</span>';
elf = '<br class="none"/>';
for (i = 0; i < product_codes.length; i++) {
cart_text += "<div>" + open_span + product_codes[i] + " Qty. " + quantities[i] + close_span + emp + elf + "</div>";
}
document.getElementById('cart_body').innerHTML = cart_text;
}
function removeTextFromArray(array, text){
for (var i=array.length-1; i>=0; i--) {
if (array[i] === text) {
array.splice(i, 1);
quantities.splice(i, 1);
return array;
}
}
}
myfunction();
hider2 = function () {
cart_bod = document.getElementById('cart_body');
cart_bod.classList.toggle('closed');
}
//below function is the important one
deleteItem = function (item) {
//dot instead of hashtag
item.parentElement.remove();
console.log('set');
var textInNode = item.parentElement.getElementsByClassName("close_span")[0].innerHTML;
textInNode = textInNode.replace(/\w*Qty\. \d+$/g, "").trim();
//new regex is /*\Qty[^)]*\ */g
//old is / *\([^)]*\) */g
codes = removeTextFromArray(product_codes, textInNode);
console.log(product_codes)
console.log(quantities);
}
body {
font: 12px tahoma;
}
.centered {
border: 2px solid transparent;
margin: 0 auto;
width: 90%;
margin-bottom: 10px;
}
#debug-box {
}
#configurator-container {
}
#submit-box {
width: 400px;
height: 50px;
margin-bottom: 5px;
}
#unit-container {
border: 2px solid transparent;
width: 50%;
/*change this width to test whether it'll fit in the SEI website'*/
}
#quantity {
width: 40px;
}
.select-label {
}
dt {
float: left;
width: 45%;
text-align: right;
cursor: default;
}
br {
margin-bottom: 30px;
}
.none {
margin-bottom: 0px;
}
.s_container {
margin-top: 20px;
}
.sm_it {
font-style: italic;
}
i {
padding-left: 20px;
font-size: 10px;
}
input[type='email'] {
width: 235px;
}
.second_line_italics {
padding-left: 40px;
}
#configurator-container {
background-image: url("data:image/gif;base64,R0lGODlhBgAGAKIAANbXy+Hi29rc08THu9HWy8zQwwAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkYzM0I5RTQ3Q0UwRUUwMTFCMzMzRkRGNDFGODlGRDVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2QjNGNjE4ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2QjNGNjE3ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzQgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyMDlGMEYwQjg2QUUwMTFCOTg2OTk5N0I0QjM1NDEyIiBzdFJlZjpkb2N1bWVudElEPSIxNzA3NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh5N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAGAAYAAAMQSBpcLnBIQFlQBApXKJBDAgA7");
}
select {
width: 235px;
}
input[type='number'] {
width: 235px;
}
.twin_btns {
display: inline;
cursor: pointer;
}
.twin_divs {
margin: 0 auto;
margin-top: 10px;
z-index: 300;
position relative;
text-align: center;
}
#second_line_ex-length {
width: 215px;
margin-left: 20px;
}
#b-length-1 {
width: 145px;
}
#b-length-2 {
width: 145px;
}
.hidden {
color: grey;
pointer-events: none;
pointer: default;
border-color: grey;
}
.contact-i-header {
font-weight: bold;
font-size: 18px;
}
input[type='text'] {
width: 235;
}
#request-quote-container {
height: 60px;
width: 90%;
margin:0 auto;
border-bottom: 1px solid #ADAEA9;
font-family: Tahoma;
background-color: #DADCD3;
}
h2 {
opacity: .8;
width: 284.917px;
text-align: right;
}
.side-by-side {
display: inline-block;
}
h5 {
margin-left: 40px;
}
#item {
margin-top: 5px;
}
#triangle-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
opacity: 0.6;
}
.slider {
overflow-y: hidden;
transition-property: all;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}
.slider2 {
overflow-y: hidden;
transition-property: all;
transition-duration:.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
max-height: 200px;
}
.slider2.closed {
max-height: 0;
}
#submit_info {
text-align: center;
margin: 0 auto;
}
.bottom_btns {
}
#sent_box {
height: 20px;
text-align: center;
}
#write_box {
height: 20px;
text-align: center;
}
#send_box {
height: 20px;
text-align: center;
}
.cart_parts {
border: 1px solid black;
box-sizing: border-box;
width: 60%;
margin: 0 auto;
}
#cart_top {
height: 40px;
font-family: Tahoma;
background-color: #DADCD3;
margin: 0 auto;
box-shadow:
}
#cart_body {
text-align: center;
}
.close_button {
border: 1px solid black;
width: 12px;
height: 12px;
border-radius: 90px;
font-size: 12px;
text-align: center;
line-height: 11px;
background-color: lightGrey;
display: inline-block;
margin-left: 20px;
}
.close_span {
display: inline-block;
}
.close_button:hover {
color: red;
border: 2px solid red;
font-weight: bold;
}
#script_no {
color: red;
text-align: center;
font-size: 16px;
}
#not_supported {
text-align: center;
color: red;
}
#ter {
margin-bottom: 30px;
background-color: red;
}
#submit-box {
margin: 45px auto;
}
#tbr {
margin-bottom:10px;
}
<div id='cart_top' class='cart_parts'> <dt class='list-item' style='margin-top: 10px;'>
View your Quote
</dt>
<dd class='list-item'>
<div id='triangle-up' class='side-by-side' style='float: right; margin-right: 20px; cursor: pointer; margin-top: 15px;' onClick='hider2()'></div>
</dd>
</div>
<div id='cart_body' class='cart_parts slider2 closed'></div>