when i am calling apex:repeat function there are getting several rows and every row having button.but but first row button open div in near first row.second button clicks need to open near to second row but its opening near to first row using javascrript.can anybody help me onthis......

<apex:repeat value="{!Result}" var="res">
         <div class="row">
<div class="col1">
                        <apex:outputText value="{!res.Bus_Number__c}"></apex:outputText><br/>
              <div class="col2">
                        <apex:outputText value="{!res.Name}"></apex:outputText><br/>
 <input type="button" id='myBtn' name='Select Seats' value="Select Seats" class="btnSelectLO" onclick="showhide()"/>
  <div id="about" class="panelmainclass" style="display: none;">
  <apex:outputText value="{!res.Bus_Number__c}"></apex:outputText><br/>
 function showhide()
           var div = document.getElementById("about");
    if (div.style.display !== "block") {
        div.style.display = "block";
    else {
        div.style.display = "none";


.panelmainclass {
                  overflow: hidden;
                  margin-bottom: 10px;
                  border: 1px solid #ccc;
                  margin-top: -11px;
                  margin-left: 151px;
                  margin-right: 175px;
  • 1
    Please add your code to the post.
    – ajinkyah
    Mar 4, 2016 at 7:29
  • Hai ninja i had updated my question and updated code.could you see once.
    – user
    Mar 4, 2016 at 9:13

2 Answers 2


As you are outputting many elements (that will have may ID values in the generated HTML because Visualforce automatically adds a counter to the ID to make it unique) you need to identify the specific element to the JavaScript. (Use your browser's "View Source" to see the generated HTML.)

One way is to pass the ID of the SObject:

class="btnSelectLO onclick="showhide('{! res.Id }')"

and to use that ID in a marker class in the panel:

class="panelmainclass panelFor{! res.Id }" 

and find that marker class in the JavaScript:

function showhide(sobId) {
    var els = document.getElementsByClassName("panelmainclass");
    for (var i = 0; i < els.length; i++) {
        var el = els[i];
        var show = el.className.indexOf("panelFor" + sobId) != -1;
        el.style.display = show ? "block" : "none";

Note the above is untested. If it doesn't work see How do I start to debug my own Visualforce/JavaScript?

  • Thanks for you reply,its working.but which first button click its open div then i am clicking second button the div class is opening but first div need to hide when i click second button.can you help me on this.....
    – user
    Mar 4, 2016 at 9:58
  • @user Changed the JavaScript for that. If you are going to do a lot of this kind of logic in your page using jQuery will make the code simpler.
    – Keith C
    Mar 4, 2016 at 10:08

you can achieve this using CSS

  • 1
    Praskash, you would add value to your answer if you'd also explain how this can be done. Mar 4, 2016 at 11:12
  • -1 because he's using Javascript to cause the 2nd row to open. CSS doesn't entirely solve his problem. It's also one of selection and Id's. If he can solve this entirely using CSS, please show us how.
    – crmprogdev
    Mar 4, 2016 at 14:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .