Want to display search result ( articles ) in click to show/hide

[dkpawar2]

Hi

I have search engine code in PHP available which works awesome!!
this displays the title of topic and article.
now i am trying to get fancy display to this result. like click to hide/show toggle with little bit effects.
it should display the result with titles only, with hidden articles somewhere. and if I click on title which I am interested in, it should only display that article on same page. I am adding some screenshots for clear picture
and the CSS I am using along with the htlm code

HTML CODE—>>

<div id="container"> 
			<div class="accordion">
			<label for="$let" class="accordionitem">
			<h2> $title <span class="arrow">&raquo;</span></h2></label>
			<input type="checkbox" id="$let"/>
			<p class="hiddentext">$description</p>
	    </div>

________________________________________________________________________________–

CSS ---->>

*{
      margin: 0; border: 0;
      }
       h1{
      text-align: center;
  margin-top: 10%
}
p{
  color: #666;
}
     #container{
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
}
.accordion label{
  display:block;
  background-color: #eeeeee;
  padding: 10px;
  color: #424242;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
  cursor: pointer;
  border-bottom: 1px solid #bdbdbd;
  border-top: 1px solid #ffffff;
}

.accordion p{
  color: #424242;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.7em;
  border-bottom: 1px solid #bdbdbd;
  visibility: hidden;
  opacity: 0;
  display: none;
  text-align: left;
  background-color: #fff;
  margin-top: 0px;
}

     #t1:checked ~ .hiddentext{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#t1{
  display: none;
  position: relative;
}

Thanks!!

OUTPUT

[dkpawar2]

 <div id=\"container\"> 
			<div class=\"accordion\">
			<label for=\"$let\" class=\"accordionitem\">
			<h2> $title <span class=\"arrow\">&raquo;</span></h2></label>
			<input type=\"checkbox\" id=\"$let\"/>
			<p class=\"hiddentext\">$description</p>
			</div>"

[dkpawar2]

kindly find an attachment for entire code thanks

search.php (2.2 KB)

[everlive]

You can either use jQuery that uses literal show();/hide(); for this. Or if you do not want to dabble in JavaScript you can use the less regarded method of straight CSS toggle label method.

[PaulOB]

As mentioned above there are many jquery versions around that will do this and are easily modified.

Note that you cannot put an h2 element inside a label element as labels are inline elements and h2s are block elements. labels are used as captions for form controls and need no other tag support anyway.