Develop Reference

How to make scrollbox responsive?

Hi I'm trying to make a scrollbox in React responsive. It works on web view but when I go to mobile, it doesn't resize. How can I fix this? Here is the CSS code:
.frame {
background-color: rgba(0, 0, 0, 0.349);
padding-top: 10px;
/* margin-top: 20px; */
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
position: relative;
display: table-cell;
}
and the scrollbox HTML code is:
<div class= "frame"
style={{width:"1100px",
height: "415px",
overflow:"auto",
padding:"2px",
paddingTop: "10px"}}>
Thank you!

The issue is that you're hardcoding the width of the scrollbox by applying a fixed pixel width value via the style attribute on the element.
We'd need to see more of your code in action to give precise advice, but here are a few things to try:
width: "100%"
Remove width, and instead use maxWidth: "1100px"
Also, if you're using non-inline CSS to style the element via the .frame classname, consider moving all your other styling properties to the non-inline CSS as well, instead of mixing inline and non-inline styling techniques.

<div id="box">
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
</div>
#box {
position: absolute;
width: 50%;
height: 50%;
top: 10;
left: 10;
overflow: auto;
border: solid red 2px;
}

How can I only allow the mouse to hover over two elements?

When you hover over a green highlight, a div of colors will appear. This will allow you to change the color of the highlight. By the way, the SO Editor is making the offset measure incorrect for the #change_color div. How can I make it where, unless the mouse is over .green_mark or #change_color, #change_color has its visibility hidden?
$(".green_mark").mouseover(function() {
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
#change_color {
position:absolute;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
visibility: hidden;
}
.blue_mark {
background: #AAF6FF;
cursor: pointer;
}
.red_mark {
background: #FF9B9F;
cursor: pointer;
}
.green_mark {
background: #D6FFAA;
cursor: pointer;
}
.yellow_mark {
background: #FFF8AA;
cursor: pointer;
}
.orange_mark {
background: #FFBF98;
cursor: pointer;
}
.purple_mark {
background: #D7D5FC;
cursor: pointer;
}
.boxes, .boxes2 {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box2 {
background: #AAF6FF;
}
#green_box2 {
background: #D6FFAA;
}
#orange_box2 {
background: #FFBF98;
}
#purple_box2 {
background: #D7D5FC;
}
#red_box2 {
background: #FF9B9F;
}
#yellow_box2 {
background: #FFF8AA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>
Lore
<span class="orange_mark">
m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt
</span>
aria in quo. Te aliquid ce
<span class="red_mark">
teros legendos has. Veritus assueverit intelleg
</span>
eba
<span class="orange_mark">
t id per
</span>
, eos cu vero pri
<span class="green_mark">
mis philo
</span>
sophia, no nec blandit propriae
<span class="green_mark">
. Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id.
Ut cas
</span>
e nominavi pro,
<span class="yellow_mark">
dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel. Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri
</span>
s sed id, mei et animal equidem, clita atomorum at has.
<span class="green_mark">
Ut noluisse placerat suscipiantur mel
</span>
, cu pri mundi dicunt
<span class="green_mark">
praesent. Ignota dicunt vulputate ad vim,
</span>
populo option aperiri
<span class="orange_mark">
me
</span>
<span class="purple_mark">
l in. Has cu essent eirmod malorum, nisl electram pri et.
In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per
</span>
<span class="orange_mark">
fe
</span>
cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne.
Mel feugiat recusabo platonem ei, sea cu numquam constituam. Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam.
Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum.
</span>
<div id='change_color'>
<div id='blue_box2' class='boxes2' title='Blue'></div>
<div id='green_box2' class='boxes2' title='Green'></div>
<div id='yellow_box2' class='boxes2' title='Yellow'></div>
<div id='orange_box2' class='boxes2' title='Orange'></div>
<div id='purple_box2' class='boxes2' title='Purple'></div>
<div id='red_box2' class='boxes2' title='Red'></div>
</div>

You can subscribe to mouseenter and mouseleave events.
var colorPickerHovered = false;
var timer;
$(".green_mark").mouseenter(function() {
if(timer){
clearTimeout(timer);
}
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
$(".green_mark").mouseleave(function(){
timer = setTimeout(function(){
if(!colorPickerHovered){
$("#change_color").css("visibility","hidden");
}
}, 250)
})
$("#change_color").mouseenter(function(){
colorPickerHovered = true;
})
$("#change_color").mouseleave(function(){
colorPickerHovered = false;
$(this).css("visibility","hidden");
})
jsfiddle example

Use the mouseout event:
$(".green_mark").mouseout(function() {
$("#change_color").css("visibility","hidden");});
If you mouseout from the green to get to the color div, it will go wrong though, so make sure the position error is fixed so you never leave the green to go over the color div (so the color div is close by enough); you could render the color div at the mouse position to fix that part too.

Wrap text with any tags except div with Jquery?

I have a problem with a text: cannot wrap anything except div children.
Here is my problem:
- I use PHPBB forum. Comments texts not wrap any container, I have just plain text.
- I need text-indent to every paragraph
- Comments text include img, strong and many html tags, include divs (like quotes).
What I think, I'd like:
- wrap text to a span (because I can use inline-block indent) with any html tag, exclude div
- delete duplicated br tags, just use one br tag only
I made two way for solution, but have a few problem with these solutions.
HTML code:
<div class="postbody" id="postdiv24216">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<br />Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.
<br />
<br />
<br />Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.
<br />
Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</div>
CSS code:
.postbody {
padding: 5px 15px;
text-align: justify;
}
.quotetitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #A9B8C2;
color: #333333;
background-color: #A9B8C2;
font-size: 0.85em;
font-weight: bold;
}
.quotecontent {
margin: 0 5px 10px 5px;
padding: 5px;
border-color: #A9B8C2;
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
font-size: 1em;
line-height: 1.4em;
font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: #FAFAFA;
color: #4B5C77;
}
.firstline {
text-indent: 1.1em;
display:inline-block;
}
JQuery code (First solution): http://jsfiddle.net/mykee/9VpjP/29/
$('.postbody').each(function(){
var container = $(this);
container.contents().filter(function() {
return this.nodeType == 8;
}).remove();
$("div.quotecontent br").remove();
if (container.filter("div", "a")){
var html = container.html().split('<br>');
container.html("");
for(var i in html)
{
if($.trim(html[i]))
container.append('<p class="gensmall"><span class="firstline">'+html[i]+"</span></p>");
}
// $(".firstline > a").unwrap();
$(".firstline > div").unwrap();
}
});
JQuery code (Second solution): http://jsfiddle.net/mykee/2AByk/12/
$('.postbody')
.contents()
.filter(function () {
return this.nodeType === 3;
})
.wrap(function () {
return $("<span>").addClass("firstline");
})
.end();
$("span.firstline div").unwrap();
$("span.firstline").filter(function () {
return $.trim($(this).html()) === '';
}).remove();
$('.postbody br').each(function () {
if ($(this).next().is('br')) {
$(this).next('br').remove();
$(this).next('br').remove();
}
});
My problem with first solution: split working with all content, and trim my div. If div include any br tag, then div container will wrong after unwrap. I put a remove to div for br tag, but this not solution :(
With second solution my problem is with filter nodeType: just plain text will wrapped to span, img or strong or any other html tag will outside span.
I need this results:
<div class="postbody" id="postdiv24216">
<p class="gensmall"><span class="firstline">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni</span></p>
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<p class="gensmall"><span class="firstline">Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</span></p>
</div>
What's hard: this one post, and I have more post on one page. I use now first solution, but not a better.
How can I except any div in div.postbody, but wrap and indent first line on other texts?

You could apply padding-left to the entire .postbody, and then use negative margins to move the quotes to the left. That would give you a pure CSS solution.
http://jsfiddle.net/9VpjP/28/
The relevant changes are:
.quotetitle {
margin: 10px 5px 0 -20px;
}
.quotecontent {
margin: 0 5px 10px -20px;
}
.quotecontent .quotecontent,
.quotecontent .quotetitle {
margin-left: 5px;
}
.postbody {
padding-left: 20px;
}
In this case I've applied 20px padding/margin.
Tested only in Chrome.
I'm not familiar with phpbb so I can't promise this solution won't interfere with your broader layout, but with a bit of tweaking it should be solid.

How to make top and bottom of div transparent

I am making a div with a content longer than what I want to view in height, so I used a height of 20em, and made overflow:scroll. This work great, but I want to add some effect to it.
How can I do so the top and bottom 50px have a opacity of 0.7? so it gets a effect when the content is scrolled "away".
Thanks!
<div>
<ul>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
</ul>
Style:
height:25em;
overflow:scroll;

DEMO
DEMO:
#wrapper {
position: relative;
}
#wrapper:before, #wrapper:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 30px; /* Height of the effect */
}
#wrapper:before {
top: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
bottom: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
background: red;
height: 20em;
overflow: auto;
border: 0 solid transparent;
border-width: 10px 0; /* 10px to be able to read first and last lines */
}
<div id="wrapper">
<div id="mydiv">
Your content
</div>
</div>

You can add two layers at top and bottom, note it will cover your content so I suggest it takes no more than 20px. Here is an example with transparent covers, but you can use nice PNG gradient instead:
.fixed_height {
position: relative;
}
.fixed_height_content {
padding: 20px 0;
height: 100px;
overflow-y: scroll;
}
.cover_top {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
.cover_bottom {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Opacity</title>
<style type="text/css">
</style>
</head>
<body>
<div class="fixed_height">
<div class="fixed_height_content">
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
</div>
<div class="cover_top"></div>
<div class="cover_bottom"></div>
</div>
</body>
</html>

I think you may like this. Try this one.
<style>
#boxBorder {
height: 3em;
overflow: hidden;
}
#boxBorder:hover {
height: 5em;
overflow: hidden;
}
#boxBorder:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 100px;
bottom: 0;
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(256,256,256,0));
}
</style>
and my div is like
<div id="boxBorder">
Vis meis ipsum cu, est ad modus facilis, ut est modus alienum consulatu. Mel ut primis dissentias. Doming omittam necessitatibus eam ei, simul vocibus complectitur at eam. Aliquid dolorem laboramus pri et. Porro utroque facilis ex has, pro eripuit ullamcorper te, an audiam civibus voluptaria mei.
Consul iuvaret te eam. Eu usu modus nonumy nostrud, his ne facilis maiestatis. Nec clita nonumes ea, solet noluisse vix cu. Te vel altera verterem sapientem, quo corrumpit theophrastus ne.
Quo iusto exerci assentior cu, ius erat velit timeam ea. Te modo offendit consectetuer has, id ius utamur quaerendum. Ut choro neglegentur nec, ea iusto feugait est. Feugait reprimique mel id, mel ad indoctum definitionem, nostrum apeirian ad pro.
an discere delenit.

What the difference between classes with space and no space in css, what the use of multiple classes with no space

I am making an accordion using CSS, the below is my use of CSS class without space. I use this to eliminate the animation of padding during slideDown and slideUp effect
.acc_container.block{
padding: 20px;
}
since it stated out that padding is 20 pixels but when i check it seems like no padding at all!!
instead, i need to add this in order to let my padding works
.acc_container. block{
padding: 20px;
}
(with space)
So what's the difference between the class in CSS with and without a space?
This is all my HTML, jQuery with CSS code:
<html>
<head>
<style type="text/css">
body {
font: 15px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
display: block;
padding: 0 0 0 50px;
color: #fff;
cursor: pointer;
}
h2.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container.block {
padding: 20px;
}
.block {
padding: 20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script> type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show();
$('.acc_trigger').click(function(){
if($(this).next().is(':hidden'))
{
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false; });
});
</script>
</head>
<body>
<div class="container">
<h2 class="acc_trigger">Web Design and Development</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need A website?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
<h2 class="acc_trigger">Logo/ Corporate Identity</h2>
<div>
class="acc_container">
<div class="block">
<h3>Need a Logo?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">Search Engine Optimization</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need to be heard</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
</div>
</body>
</html>

.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.
So you probably ask what's the difference between .classA .classB and .classA.classB selectors.
First selector will match any element with class classB that's placed within element with class classA, eg.:
<div class="classA">
<p>
Hello World!
<span class="classB">this text will be matched by first selector</span>
Lorem ipsum!
</p>
</div>
Second selector will match any elements with both, classA and classB classes, eg.:
<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>

It´s all about addressing the right element the right way AND taking into account the fact that older versions of Internet Explorer don´t recognize multiple classes on an element and will only use the last one.
Suppose your html is:
<div class="one two">some content</div>
older versions of IE will only apply class .two.
However, in modern browsers you can access it like:
.one {
}
or
.two {
}
or
.one.two {
}
The last one is obviously the most specific.
By the way, something like:
.acc_container. block{ padding: 20px; }
is bound to lead to problems as there is no html element called block and .acc_container. is not a valid class name I think...

.acc_container.block - this one means that both "acc_container" and "block" are applied to element
Like
<div class="acc_container block another-class">
.acc_container .block - means: each element with class "block" inside element with class "acc_container"
For example:
<div class="acc_container"> <p class="block">...