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="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 3</h2>
				<p>
				Introduces high school students and adults to the construction industry
				</p>
			<br>
		</div> <!-- end...

CSS

.article {
  color: #222;
  background: rgba(255,255,255,.9);
  font-family: arial,sans-serif;
 }


.current .item {
  background: #FFE964;
}

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



.description {
  display: none;
}

.description h1 {
	border: none;
	margin-top: 0px;
	font-size: 23px;
}


/*b*/

.description h3{
  display: float;
  display:block;
  border: none;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
}

.description h2 {
padding-left: 10px;
	font-family: arial,sans-serif;
	font-variant: normal;
	font-weight: bold;
	font-size: 100%;
	/*color: #1f4680;*/
}


.article h2 {
	padding-left: 0px;
}

.supleft {

	float:left;
	margin-left: 2px;
	padding-left: 7px;
	text-align: left;
	font-size: 90%;
}

.supright {
	
	float:right;
	margin-right: 2px;
	padding-right: 7px;
	text-align: right;
	font-size: 90%;
}

.description .supleft {
	visibility: hidden;
}

.mainbanner img{
	padding-top:10px;
	
}

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

$(document).ready(main);