Trampo

drop-down java-script menu item, fixing persistence and pre-selection

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!---------------------- MAIN CONTENT  ------------------------------------->
<a id="main_content"></a>

<div id="content">
    <h1 class="title">Doc tittle</h1>
  <p>
Completely provide access to user friendly partnerships via technically sound communities.  Credibly negotiate distinctive e-business with go forward infomediaries. Seamlessly leverage other's real-time intellectual capital through 24/7 resources. Globally whiteboard highly efficient best practices before competitive customer service.
  </p>
  </br>

<div class="lists">
<a class="listexpand" style="float:right;" href="#">EXPAND/COLLAPSE (gueto)</a>
</div>
<br>

<div class="articles container"> 
    <div class="article current">
        <div class="item row">
			<h2 class="title">Preselected current div</h2>
			<p>
            Enthusiastically customize  platforms vis-a-vis market positioning processes.
			</p>
		</div><!-- end -->
            
            <div class="description row"> 
				<h2>Sub article 1 </h2>
				<p>
				I would like this to remain open till clicked in the parent heading h1
				</p>
                <i><a href="www.example.com/" target="_blank">this click action will toggle the script</a></i>
			<br>
		</div> <!-- end -->
                
            <div class="description row"> 
				<h2>Sub article 2</h2>
				<p>
				Introduces high school students and adults to the construction industry
				</p>
                <a href="http://www.usability.gov/" target="_blank">link text</a>
			<br>
		</div> <!-- end -->                
                
            </div>
        </div>
            
<!-- next action elements -->
	<div class="article">
			<div class="item row">
				<h2 class="title">Second Div</h2>
				<p>
				industry impacts more annual earnings of billions needs of the industry
				</p>
				<br> 
			</div>
			
	<div class="description row"> 
				<h2>Sub article...

CSS

.description {
  display: none;
}

.current .item {
  background: #FFE964;
}

.item {
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  
}

.description h3{
  display: float;
  display:block;
}

.description h2 {

	font-family: arial,sans-serif;
	font-weight: bold;
	color: #1f4680;
}

JavaScript

var main = function() {
    $('.article .item').click(function() {
        var article = $(this).closest('.article');
        if(article.hasClass('current')) {
                article.children('.description').toggle("slow");
        }
        else {
                $('.article').removeClass('current');
                $('.description').hide();
                article.addClass('current');
                article.children('.description').toggle("slow");
        };
 });
        /*gueto toggle to expand/collapse all description items*/
    	$("a.listexpand").on('click', function () {
	    $('div.description').slideToggle(600).toggleClass('active');
	});
    
}

$(document).ready(main);