How to call div class when button clicks using in apex:repeat function?

Question

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>
              <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>
<div>
  <div id="about" class="panelmainclass" style="display: none;">
  <apex:outputText value="{!res.Bus_Number__c}"></apex:outputText><br/>
   </div>     
   </apex:repeat>
 <script>
 function showhide()
     {
           var div = document.getElementById("about");
    if (div.style.display !== "block") {
        div.style.display = "block";
    }
    else {
        div.style.display = "none";
    }
     } 
       </script>

css:

.panelmainclass {
                  overflow: hidden;
                  margin-bottom: 10px;
                  border: 1px solid #ccc;
                  margin-top: -11px;
                  margin-left: 151px;
                  margin-right: 175px;
                }

Hai ninja i had updated my question and updated code.could you see once. — user, Mar 04 '16 at 09:13

score 1 · Accepted Answer · edited Apr 13 '17 at 12:54

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:

<script>
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";
    }
} 
</script>

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 04 '16 at 09: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 04 '16 at 10:08

score -1 · Answer 2 · answered Mar 04 '16 at 07:33

-1

you can achieve this using CSS

answered Mar 04 '16 at 07:33

Prakash Nawale

472
2
13

1

Praskash, you would add value to your answer if you'd also explain how this can be done. – Samuel De Rycke Mar 04 '16 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 04 '16 at 14:47

How to call div class when button clicks using in apex:repeat function?

2 Answers2