Ik heb momenteel een div met daarin links een image met float left.
rechts daarvan komt een div genaamt "small" met text erin.
als er een bepaald aantal characters inzit komt er een knop bij met de text readmore.
met javascript veranderd de div "small" dan in de div "big"
de javascript code is :
<script>
$('.post').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Click to collapse":"read more");
$(this).closest('.post').find('.small, .big').toggleClass('small big');
});
</script>
en de styles van big en small is :
.small {
max-height: 200px;
height:auto;
margin-top:5px;
margin-left:10px;
margin-right:10px;
word-wrap:break-word;
}
.big {
height: auto;
margin-top:5px;
margin-right:10px;
margin-left:10px;
word-wrap:break-word;
}
wat er nu gebeurt is dat de text rechts blijft van de image zoals in dit plaatje :
http://imgur.com/AbUE6kE
en als je op de knop "read more" klikt vult de text wel de div helemaal om de image heen.
Toevoeging op 17/05/2014 22:22:34:
hoe krijg ik ook in de small div het resultaat dat de text om de foto heen gaat en niet alleen rechts blijft?
Toevoeging op 17/05/2014 22:34:20:
oh heb het zelf al gevonden , had de image bij beide divs nog buiten staan zag het precies na m'n post
