Toggling Visibility of Buttons using Javascript

Question

I want to make it so that when the compare button is pressed, and the table is shown, the button changes to "back to products" and it takes the user back to products.php when clicked.

Currently if products are being compared, and the user presses the button again, the table just adds the products again doubling the number of rows.

<body>
  <div id="content">
    <div class="bg-img-container" style="margin-top: -1.5%;">
      <img src="images/books-bg.jpg" alt="Book Image" style="width:100%;">
    </div>
    <br><br>
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12" style="text-align: center;">

          <script>
          var count = 0; //for counting clicks

          $(function(){
            $(".product").on('click', function(e) {
              e.preventDefault();

              //if class is already there, decrement to remove book selection
              if ($(this).closest('.product').hasClass("compare")) {
                $(this).closest('.product').removeClass("compare");
                count = count - 1;

              } else if (count <= 2) {
                count += 1; //increment count
                $(this).closest('.product').toggleClass('compare');

              } else { //cannot select more than 3
                alert("Please Limit your Selection to 3 books");
              }
            });
          });

          function buildComparisonTable(){

            var comparisonTableBody = $('table.comparison tbody');
            var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
            var comparisonTableBodyProductImgCol = $('table.comparison tbody tr.product-img');
            var comparisonTableBodyProductScopeCol = $('table.comparison tbody tr.product-scope');
            var comparisonTableBodyProductImpactCol = $('table.comparison tbody tr.product-impact');
            var comparisonTableBodyProductorcidCol = $('table.comparison tbody tr.product-orcid');
            var comparisonTableBodyProductoaCol = $('table.comparison tbody tr.product-oa');
            var comparisonTableBodyProductdspCol = $('table.comparison tbody tr.product-dsp');

            comparisonTableBody.find('.product-col').remove();
            $('.product.compare').each(function(){

              var id = $(this).attr('data-id');
              var title = $(this).attr('data-title');
              var img = $(this).attr('data-img');
              var scope = $(this).attr('data-scope');
              var impact = $(this).attr('data-impact');
              var orcid = $(this).attr('data-orcid');
              var oa = $(this).attr('data-oa');
              var dsp = $(this).attr('data-dsp');

              comparisonTableBodyProductTitleCol.append('<th class="product-col"><center>'+title+'</center></th>');
              comparisonTableBodyProductImgCol.append('<td class="product-col"><img src='+img+'></td>');
              comparisonTableBodyProductScopeCol.append('<td class="product-col">'+scope+'</td>');
              comparisonTableBodyProductImpactCol.append('<td class="product-col">'+impact+'</td>');
              comparisonTableBodyProductorcidCol.append('<td class="product-col">'+orcid+'</td>');
              comparisonTableBodyProductoaCol.append('<td class="product-col">'+oa+'</td>');
              comparisonTableBodyProductdspCol.append('<td class="product-col">'+dsp+'</td>');
            });
          }
          </script>

        </div>

        <div class="col-md-12 col-sm-8">
          <hr>
          <h4 style="float: left; text-align: left;">Select up to 3 books, Click "Compare Titles", View your Top Picks Side-by-Side!</h4>
          <button class='btn goCompare' id="compare-remove"; style="color: white">Compare Titles</button>
          <table class='comparison' border="1px" style="float: left;">
            <thead>
              <tr class='product-title'></tr>
            </thead>
            <tbody>
              <tr class='product-img'></tr>
              <tr class='product-impact'></tr>
              <tr class='product-oa'></tr>
              <tr class='product-scope'></tr>
              <tr class='product-orcid'></tr>
              <tr class='product-dsp'></tr>
            </tbody>
          </table>
        </div>

        <script>
        function removeSelection() {
          var x = document.getElementById("compare-remove");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>

      </div>
    </div>
  </div>

Keep it one button one action. Use two buttons and toggle their visibility based on your requirements. If you're going back to products.php, your second button might better be a a link styled as a button. — Jon P
– Jon P, Commented Jul 25, 2019 at 0:24
api.jquery.com/toggle , api.jquery.com/hide , api.jquery.com/show — Jon P
– Jon P, Commented Jul 25, 2019 at 0:26
I still cannot figure it out, can you show an example please? — user11831425
– user11831425, Commented Jul 25, 2019 at 1:01

RifkyLTF · Accepted Answer · 2019-07-26 02:48:10Z

1

I hope this is what you looking for

$(document).ready(function(){
  $('button').click(function(){
    if ($(this).is('[btn-link]')) {
      window.location = "product.php"
    } else {
      $(this).hide()
      $('#back').show()
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="compare">Compare</button>
<button id="back" btn-link style="display:none">Back to products</button>

Or

$(document).ready(function(){
  $('#compare').click(function(){
    $(this).hide()
    $('#back').show()
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="compare">Compare</button>
<a href="product.php" id="back" style="display:none">Back to products</a>

I didn't use jquery toggle() function since it will make a different result for the button if you click the button rapidly.

Code request

<button id="compare" onclick="$(this).hide(); $('#back').show()">Compare</button>
<button id="back" style="display:none" onclick="clearTable()">Back to products</button>

<script>
  function clearTable(){
    $('table tr').each(function(){
      $(this).html('')
    })

    $('#back').hide()
    $('#compare').show()
  }
</script>

edited Jul 26, 2019 at 2:48

answered Jul 25, 2019 at 3:13

RifkyLTF

2924 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user11831425 Over a year ago

Hey one more question, now when I add the href="products.php" to the back button it doesn't do anything but disappear

RifkyLTF Over a year ago

are you trying to move to another page ?

user11831425 Over a year ago

Yes, I need the "back" button to go to products.php

user11831425 Over a year ago

Is there any way to edit the "back" button so that what it does it the opposite of my ` function buildComparisonTable()` ? I want it to remove the table instead of going back to journals.php that way the page doesnt need to be reloaded

RifkyLTF Over a year ago

i didn't even now where the journals.php is, lol. another update on my answer, let me know if you need anything else

Collectives™ on Stack Overflow

Toggling Visibility of Buttons using Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related