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;
}

Accordian not working properly using object oriented javascript

I'm doing accordian using object oriented javascript here the problem is toggle is not working when I click.As expect output is when I click display content and icon will be + and other child close.initially, firstchild will be active.
I just started learning object oriented javascript.Anything wrong with code let me know.
Accordion = {
accordionContent: '.accordion-s1 .accordion--content p',
accordionTitle: '.accordion--title',
init: function() {
$(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
$(this.accordionContent).slideToggle();
$(this.accordionTitle).removeClass("active");
if($(this.accordionTitle).siblings().is(":visible")) {
$(this.accordionTitle).siblings().slideDown();
$(this).find('.fa.fa-times').toggleClass('plus');
$(this.accordionTitle).addClass("active");
}
}
}
$(document).ready(function(){
Accordian.init();
});
.accordion-s1 .accordion--title {
display: flex;
flex-direction: row;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 300;
transition: all .25s ease;
background-color: #2783e8;
color: #ffffff;
}
.accordion-s1 .accordion--title h4 { flex:1;font-weight: 600;}
.accordion-s1 .aticon-times { padding: 5px;}
.plus {
transform: rotate(45deg);
transition: all .25s ease;
}
.accordion-s1 .accordion--content {
padding: 10px 20px;
background: whitesmoke;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="accordion-s1">
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
</div>

I have found couple of mistake from your given code. $(this.accordionContent).slideToggle() actually targeting all of the element. Also same is $(this.accordionTitle).siblings().
Hello you can try following code:
Accordion = {
accordionContent: '.accordion-s1 .accordion--content',
accordionTitle: '.accordion--title',
init: function() {
$(this.accordionTitle).removeClass('active').eq(0).addClass("active");
$(this.accordionContent).slideUp().eq(0).slideDown();
$(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function(e) {
if($(e.currentTarget).next($(this.accordionContent)).is(":visible")) {
return
}
$(this.accordionTitle).siblings().slideUp();
$(this.accordionTitle).removeClass('active');
$(e.currentTarget).next($(this.accordionContent)).slideDown();
$(e.currentTarget).addClass("active");
}
}
$(document).ready(function(){
Accordion.init();
});
For plus sign you need adjust in CSS and HTML title section as well.
In CSS:
.accordion--i .fa-times {
display:inline-block;
}
.accordion--i .fa-plus {
display:none;
}
.active .accordion--i .fa-times {
display:none;
}
.active .accordion--i .fa-plus {
display:inline-block;
}
In HTML you need add following change in every title in each block:
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
<i class="fa fa-plus aticon-times"></i>
</span>
</div>

JQuery Grab Content from Page Anchors and Replace Hover State Titles

I have a set of page anchors that using JQuery are set where the anchor links show a pop-up tool tip to say what the anchor is called.
I want to be able to take the h4 title of the page anchor and replace the title of the anchor link using JQuery.
Here is the mark up of the one of the anchors:
<a name="section1">
<h4 id="sectiontitle1">Overview</h4>
</a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Here are the links to said page anchors:
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
Script for the solution:
$(document).ready(function() {
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name=" + title + "] h4").html());
$(this).data('tipText', title)
$('<p class="tool-tip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
$('.tool-tip')
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
$('.tool-tip').fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
so the pop ups tool tips when hovering over should show:
section 1 = Overview
section 2 = Main Structure
section 3 = Support
section 4 = Contact
final UI
what would be the best way to achieve this? I have tried :contains, but this has brought me no joy.
TIA.
This is the fiddle for the problem: fiddle link
to mention, that the jquery that drives the pop-up tool tip is heavily dependent on the css and doesn't seem to want to play ball, but if you hover over the numbered bullets on the right, the titles show up and need to match the titles of each section, 1 will be overview, 2 will be main structure etc.

$(function(){
var popupTitle = $('<p class="tool-tip"></p>').appendTo($('body')).hide();
// Find your links, but we could have generated your links from the client side
$('div.article-anchors ul li a[href^="#"]').each(function(){
var ref = $(this),
anchor = ref.attr('href') || '', // Find the #anchor
pound = anchor.indexOf('#'); // Find the location of #
// Verify
if (pound >= 0 && (pound + 1) < anchor.length) {
// Remove the # sign
anchor = anchor.substring(pound + 1);
// Find and set the title from the first h4 tag
ref.attr('floatTitle', $('a[name="'+anchor+'"] h4:first').text());
ref.attr('title', '');
}
}).mouseenter(function() {
var title = $(this).attr('floatTitle');
popupTitle.stop().hide()
.text(title)
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
popupTitle
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
popupTitle.fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
/*article anchors*/
.article-anchors {
display: block;
position: fixed;
right: 20px;
top: 50%;
}
.article-anchors ul {
list-style: none;
}
.article-anchors ul li:first-child i,
.article-anchors ul li:last-child i {
padding: 0;
text-align: center;
display: block;
font-size: 39px;
width: 46px;
height: 46px;
color: #0485c2;
margin: 0 0 20px 0;
}
.article-anchors ul li {
padding: 0;
margin: 0;
}
.article-anchors ul li a {
position: relative;
right: 0px;
z-index: 9999;
display: block;
width: 36px;
margin: 0 0 20px 0;
background-color: #E9F2F7;
border: 3px solid #0485c2;
color: #0485c2;
border-radius: 100px;
text-align: center;
padding: 8px 2px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.tool-tip {
display: none;
position: absolute;
margin-bottom: 20px;
width: auto;
padding: 6px 8px;
font-size: 16px;
font-weight: bold;
line-height: 24px;
color: #9EC483;
background-color: #CFE5BF;
border: 1px solid #9EC483;
border-radius: 3px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
<a name="section1"><h4 id="sectiontitle1">Overview 1</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section2"><h4 id="sectiontitle2">Overview 2</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section3"><h4 id="sectiontitle3">Overview 3</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section4"><h4 id="sectiontitle4">Overview 4</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Full-page the snippet to see it better.

Your mouseenter function should look like this
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name="+title +"] h4").html());
})

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.

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">...