如何在javascript中的每个id点击上调用show hide方法使id唯一

Question

How can I access seemore button to all next seemore buttons? It only works for first one. How can I make it -show dynamic ids so it will work for all seemore buttons?

javascript:

<script type="text/javascript">
    function changeClass() {
        if (content.classList.contains("show")) {
            btn.innerHTML = "Show Less";
        } else {
            btn.innerHTML = "Show More";
        }
    }
    function showHide(shID) {
        if (document.getElementById(shID)) {
            if (document.getElementById(shID+'-show').style.display != 'none') {
                document.getElementById(shID+'-show').style.display = 'none';
                document.getElementById(shID).style.display = 'block';
            }
            else {
                document.getElementById(shID+'-show').style.display = 'inline';
                document.getElementById(shID).style.display = 'none';
            }
        }
    }
</script>

php:

<?php 
$id1        =   $_SESSION['id'];
$sql        =   "select fname from User_registration where U_id=$id1";
$result     =   mysql_query($sql ,$conn);
$row        =   mysql_fetch_array($result);

$sql1       =   "select * from Job_post where u_id=$id1";
$result1    =   mysql_query($sql1,$conn);
$row1       =   mysql_fetch_array($result1);
$c          =   $row1[job_category];
?>
<div class="job" style="background-color:#E2F5D0;width:100%;">
    <div class="container" id="jobcontainer">
        <div class="row" id="jobrow">
            <div class="col-sm-12" id="jobcol">
                <h1 class="jobh"> Ciao <?php echo $row['fname'];?> </h1>
                <h3 class="jobh3">This is job_posting page. with description and budget
                    as per categories and sub categories. profile details are show here.
                    This is job_posting page. with description and budget
                    as per categories and sub categories. profile details are show here. </h3>
            </div>
        </div>
        <div class="row" id="jobrow1">
            <div class="col-sm-8">
                Description
            </div>
            <div class="col-sm-4">
                Budget
            </div>
        </div>
        <?php 
$sql2       =   "select * from Job_post where job_category='$c'";
$resultr    =   mysql_query($sql2,$conn);

$index      =   0;
while($row4 = mysql_fetch_array($resultr)) { ?>
        <div class="row" id="jobrow2">
            <div class="col-sm-8">
                <h3 class="jobh33"> <?php echo $row4[project_name]; ?> </h3>
                <h3 class="jobh3">
                    <?php $row2 =   $row4['project_description'];
                        echo substr($row2, 0, 250);?>
                    <br>
                    <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">See more. </a> </h3>
                <div id="example" class="more">
                    <h3><?php echo substr($row2,250);?></h3>
                    <h3><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">See less.</a></h3>
                </div>
                <br>
                <div class="col-sm-4">
                    <?php echo $row4['job_category'];?>:
                    <div class="jobh3">
                        <?php echo $row4['job_sub_category'];?>
                    </div>
                </div>
                <div class="col-sm-4">
                    Location:
                    <div class="jobh3">
                        <?php echo $row4['job_location'];?>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <h3 > <?php echo $row4['budget'];?> </h3>
                <button type="button" class="btn btn-success"> Fai I'Offeria </button>
            </div>
        </div>
        <?php }?>
    </div>
</div>

Answer 1

You will want to use classes to do this. I am using jQuery because I don't know how to do this sort of thing with raw javascript:

<div class="group">
    <span class="name">Joe</span>
    <div class="moreinfo" style="display: none;">
        Stuf that is hidden about joe
    </div>
    <div class="evenmore" style="display: none;">
        Even more stuff.
    </div>
</div>
<div class="group">
    <span class="name">Frank</span>
    <div class="moreinfo" style="display: none;">
        Stuf that is hidden about frank
    </div>
    <div class="evenmore" style="display: none;">
        Even more stuff.
    </div>
</div>
<div class="group">
    <span class="name">Jitendra</span>
        <div class="moreinfo" style="display: none;">
            Stuf that is hidden about this OP
        </div>
        <div class="evenmore" style="display: none;">
            Even more stuff.
        </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
function ClickParent(ClickElem,ElemFind)
    {   
        $("."+ClickElem).click(function() {
            var GetGrp  =   $(this).parents(".group");
            GetGrp.find("."+ElemFind).fadeToggle();
        }); 
    }

// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
</script>

DEMO:

http://jsfiddle.net/qfqbmw2h/