JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="blog" class="page">
    <div class="maintitle">MCA Blog</div>
    <div class="title smalltitle">
        <div class="row">Third Blog Topic<span class="time">9 June 2011 - 6:43 PM</span></div>
    </div>
    <div class="content nodisplay" style="width:400px;margin-left:94px;min-height:25px;">
        <div class="row">This is the third blog entry. Third entry for blog system<span id="32a14c2108bd05409665eaadb6fa0be7" class="more" style="float:right;">
            <label class="uiButton uiButtonConfirm" style="margin:5px;">
                <input value="More" type="button" id="more" />
            </label>
            </span></div>
    </div>
    <div class="title smalltitle">
        <div class="row">Second Blog Topic<span class="time">9 June 2011 - 6:42 PM</span></div>
    </div>
    <div class="content nodisplay" style="width:400px;margin-left:94px;min-height:25px;">
        <div class="row">This is the second blog entry. I wish to test this blog<span id="21024ea13f182ed93b160733d12d71a5" class="more" style="float:right;">
            <label class="uiButton uiButtonConfirm" style="margin:5px;">
                <input value="More" type="button" id="more" />
            </label>
            </span></div>
    </div>
    <div class="title smalltitle">
        <div class="row">My First BlogMy<span class="time">9 June 2011 - 6:09 PM</span></div>
    </div>
    <div class="content nodisplay" style="width:400px;margin-left:94px;min-height:25px;">
        <div class="row">This is my first blogThis is my first blogThis is my first blogThis is my first blogThis is my first blogThis is my first blogThis is my first blogThis is my first blog<span id="24b72d1a4beabff3425af3359ebec4ae" class="more" style="float:right;">
            <label class="uiButton uiButtonConfirm" style="margin:5px;">
                <input value="More" type="button" id="more" />
            </label>
            </span></div>
    </div>
</div>

CSS

.time{float:right; text-transform:none; text-height:auto; font-size:10px;padding:3px;border:thin solid #666;margin:5px;}
#blog .maintitle{
    border:3px solid #999;
    background-color:#CCC;
    color:#666666;
    text-transform:capitalize;
    padding:5px;
    margin-bottom:10px;    
}
/*blog css ends*/

#uploadprogress{
    display:none;
}
#badagephoto{
    margin:10px;
}
#badage{
    display:table-cell;
    vertical-align:middle;
}
#badagephoto,#badageuname{
    display:inline-block;
    vertical-align:middle;
}
.mediumphoto{width:64px;height:64px;}
/*.mediumphoto, #badageuname{border:thin solid #F00;}*/
.validity{
    *border:thin solid #F00;
    width:100px;
}
.page{
    *border:thin solid #F00;
}
hr{background-color:#333333;color:#333333;border:thin solid #999;width:95%;margin:5px;}
.menu, .accountmenu {
*border:thin solid #666;
    color:#666;
    cursor:pointer;
    margin-top:1px;
    margin-bottom:1px;
*padding:1px 1px 1px 10px;/*padding:1px 1px 1px 3px;*/
*padding:auto 10px auto 10px
    font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size:13px;
}
.menu{padding:1px 5px 1px 5px;}
.menuprogress{
    background-image:url(img/progresssgu.gif);
    background-position:right;
    background-repeat:no-repeat;
}
.accountmenu{padding:4px 1px 4px 10px;}
.menuhover {
    background-color:#CCC; /*original CCC*/
}
.menuactive {
    background-color:#B6B6B6;/*A6A6A6*/
    color:#333333;
    font-weight:500;
}
#leftcontainer {
    float:left;
    display:inline-block;
    width:65%;
    height:auto;
*border:thin solid #00F;
}
#rightcontainer {
    float:right;
    width:34%;
    height:800px;/*change to auto later*/
*border:thin solid #F00;
}
.title,.action{
    border:thin solid #999;
    background-color:#CCC;
    color:#666666;
    text-transform:capitalize;
    padding:5px;
    margin-bottom:10px;
}
.title{font-size:16px;}
.title,.content{overflow:auto;}
.nodisplay{display:none;} /*for hiding multiple accordian style...

JavaScript

$('.more').live('click',function(){
    var x = $('.content:not(:visible)').prev('.title');
    $(x).fadeOut('slow',function(){
        $(this).next('.content').remove();
        $(this).remove();
    });
});

$('.title').live('click',function(){
    //alert($(this).attr('class'));
    if($(this).next('div:visible').length==0){
        $('.title').nextUntil('.title').slideUp('fast');
        $(this).nextUntil('.title').slideToggle('fast');
        $('.page .title').addClass('smalltitle');
        $(this).removeClass('smalltitle');
    }
});
$('.title').live('mouseover',function(){
    if($(this).next('div:visible').length == 0)
        $(this).css({'cursor':'pointer'});
    else
        $(this).css({'cursor':'none'});
});

$('.maintitle').live('click',function(){ //click here to check if .content are removed
   $('.content').fadeIn('slow'); 
});