CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shubham Batra
Shubham Batra

Reputation: 2375

show and hide div on click on image?

I am trying to show and hide div on click on + image in html and javascript. It is working but the problem is, I want the hide the sub div on page load.

When I add $(".sub").hide(); this to inside script then sub div is hide on page load but that button image with + sign do not work for first two times after that it work normally.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<body>

    <table data-toggle="table" data-url="tables/data1.json"  
data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" 
data-pagination="true" data-sort-name="name" 
data-sort-order="desc">
 <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th data-field="state" data-sortable="true">Category Name</th>
      <th data-field="state" data-sortable="true">Product Image </th>
      <th data-field="state" data-sortable="true">Product Name </th>
      <th data-field="state" data-sortable="true">Seller Name</th>
      <th data-field="state" data-sortable="true">Price</th>
      <th data-field="state" data-sortable="true">Last Price 1</th>
      <th data-field="state" data-sortable="true">Last Price 2</th>
      <th data-field="state" data-sortable="true">Seller Rating</th>
    </tr>
</thead>
   
  <tr>
    <td><img src="http://www.bls.gov/images/icons/icon_small_plus.gif" 
         class="image1" id="image1" onclick=diffImage(this) /></td>
    <td><p>a </p></a></td>
    <td><img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg" 
          style="width:100px;height:100px;"/></td>
    <td><p>b</p></a></td>
    <td><p>c</p></td>
    <td><p>d</p></td>
    <td><p>e</p></td>
    <td><p>f</p></td>
    <td><p>g</p></td> 
    <td>
       <a href="/change" name ='i'> 
        <i class="fa fa-trash-o fa-fw" ></i> Delete </a>
     </td>
   </tr>
 
 <div id= "sub" class="sub">
<tr class="sub" id="fd" >
  <td></td><td></td>
  <td></td>
  <td colspan="6">
    <table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3" >
    <!-- <th class = "tab">Product Image </th> -->
    	 <th class = "tab">Product Name </th>
    	 <th class = "tab">Seller Name</th>
    	 <th class = "tab">Price</th>
    	 <th class = "tab">Last Price 1</th>
    	 <th class = "tab">Last Price 2</th>
         <th class = "tab">Seller Rating</th>

      <tr>
         <td> 
    		<a href="ffds"><p>a</p></a>
    		</td>`
    	 <td>
    		<p class = "tab">b</p>
    		</td>
    	<td>
    		<p class = "tab">c</p> 
    		</td>
    	<td>
    		<p class = "tab">d</p> 
    		</td>
    	<td>
    		<p class = "tab">e</p> 
    		</td>
    	<td>
    		<p class = "tab">f</p>
    		</td> 
    	<td>
    		<a href="/change_sub" name = "g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;"> 
         <i class="fa fa-trash-o fa-fw"></i> Delete </a>
    	 </td>

     </tr>
 </table>
</td>
 </tr>
</div>
</table>

  <script>
      $(".sub").hide();
      function diffImage(img) 
        {
          if(img.src.match("http://olenka.med.virginia"))
           {
               img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
             
               $(".image1").click(function()
                  {
                      $(this).closest('tr').next('.sub').hide();
    			 });
    	}
    else
        {
            img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
    	     $(".image1").click(function(){
    				 $(this).closest('tr').next('.sub').show();
    					    });
    	}
  }</script>

</body>

Upvotes: 2

Views: 242

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

In your current code, you're trying to add new onclick handler when you click that image. And you add different handler based on the img's src. The cause is that you need to click at least twice, the event will then act normally, the first time you add a hide event, the seconed time you add a show event, and so on.

Note that register a new event won't override the previous one, it seems to work normal because it executes the handler by register order, so add odd click, you register a new hide that would be called last, and at even time, you register a show. It just make you register more and more events in your page, and should be avoid.

You just have to remove the register part, and move the hide and show logic out, and it should work fine.

function diffImage(img) {     
  if(img.src.match("http://olenka.med.virginia")) {
    img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
    $(img).closest('tr').next('.sub').hide();
  } else {
    img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
    $(img).closest('tr').next('.sub').show();
  }
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>
  <table data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
    <thead>
      <tr>

        <th data-checkbox="true"></th>
        <th data-field="state" data-sortable="true">Category Name</th>
        <th data-field="state" data-sortable="true">Product Image</th>
        <th data-field="state" data-sortable="true">Product Name</th>
        <th data-field="state" data-sortable="true">Seller Name</th>
        <th data-field="state" data-sortable="true">Price</th>
        <th data-field="state" data-sortable="true">Last Price 1</th>
        <th data-field="state" data-sortable="true">Last Price 2</th>
        <th data-field="state" data-sortable="true">Seller Rating</th>
      </tr>
    </thead>

    <tr>
      <td>
        <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick=diffImage(this) />
      </td>
      <td>
        <p>a</p>
        </a>
      </td>
      <td>


        <img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg" style="width:100px;height:100px;" />
      </td>
      <td>
        <p>b</p>
        </a>
      </td>
      <td>
        <p>c</p>
      </td>
      <td>
        <p>d</p>
      </td>
      <td>
        <p>e</p>
      </td>
      <td>
        <p>f</p>
      </td>
      <td>
        <p>g</p>
      </td>

      <td>
        <a href="/change" name='i'> <i class="fa fa-trash-o fa-fw"></i> Delete</a>


      </td>

    </tr>
    <div id="sub" class="sub">
      <tr class="sub" id="fd">

        <td></td>
        <td></td>
        <td></td>
        <td colspan="6">
          <table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3">
            <!-- <th class = "tab">Product Image </th> -->
            <th class="tab">Product Name</th>
            <th class="tab">Seller Name</th>
            <th class="tab">Price</th>
            <th class="tab">Last Price 1</th>
            <th class="tab">Last Price 2</th>
            <th class="tab">Seller Rating</th>


            <tr>


              <td>
                <a href="ffds">
                  <p>a</p>
                </a>
              </td>
              <td>
                <p class="tab">b</p>
              </td>
              <td>
                <p class="tab">c</p>
              </td>
              <td>
                <p class="tab">d</p>
              </td>
              <td>
                <p class="tab">e</p>
              </td>
              <td>
                <p class="tab">f</p>
              </td>
              <td>


                <a href="/change_sub" name="g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;"> <i class="fa fa-trash-o fa-fw"></i> Delete</a>
              </td>

            </tr>



          </table>
        </td>

      </tr>
    </div>

  </table>

  <script>
    $(".sub").hide();
    function diffImage(img) {     
      
      if(img.src.match("http://olenka.med.virginia")) {
        img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
        $(img).closest('tr').next('.sub').hide();
      } else {
        img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
        $(img).closest('tr').next('.sub').show();
      }
    }
  </script>

</body>

Upvotes: 3

Related Questions