CODEWITHSUNDEEP
jqueryhtmltexttogglevisibility
Cesar
Cesar

Reputation: 534

Toggle a bunch of divs also changing the link

I have a bunch of divs, identified with an ID starting with a string (kind = "brand"). I want to toggle the visibility of the divs by clicking an href inside an span. I want the text of this link to change from "SHOW" to "HIDE".

Without the change of text, the function is just onle line:

  jQuery("#" + kind + "-" + value).toggle();

but with the text I cannot by add one line after other, til almost 15 lines of code. Surely it is much simpler than that.

Updated code

            function show_hide(brand, value){
                var show_hide_text = ["SHOW", "HIDE"];
                var id_selected = jQuery("#" + brand + "-" + value).attr("id");
                jQuery('div[id ^= "' + brand + '"]').each(function() {
                    if(this.id != id_selected){
                        jQuery(this).hide();
                        jQuery("#" + this.id.replace("-", "-show-")).html(show_hide_text[0]);
                    }else{
                        var visi = (jQuery("#" + brand + "-show-" + value).html() == show_hide_text[0]) ? 1 : 0;
                        jQuery("#" + brand + "-show-" + value).html(show_hide_text[visi]);
                    } // if
                });
                jQuery("#" + brand + "-" + value).toggle();
            } // function

The HTML code would go like this (just one div shown):

    <div ><h3 >SUPER BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Super-brand');"><span id=brand-show-Super-brand">SHOW</a></span></h3>
      <div class="brand" id="brand-Super-brand">
            <div>PRODUCT #1</div>
       </div>
  </div>

    <div ><h3 >MEGA BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Mega-brand');"><span id=brand-show-Mega-brand">SHOW</a></span></h3>
        <div class="brand" id="brand-Mega-brand">
          <div>PRODUCT #3</div>
        </div>
     </div>

...

Upvotes: 0

Views: 65

Answers (2)

jacqbus
jacqbus

Reputation: 477

I'm not sure if i understand you correctly, but here's code. HTML is also changed a little.

$(document).ready(function(){
  var show_hide_text = ["SHOW", "HIDE"];
  $('.show-hide-content').hide();
  $('.show-hide-toggle').on('click', function(e) {
    e.preventDefault();
    var $content = $(this).parent().next('.show-hide-content');
    $('.show-hide-content').not($content).hide().prev().children('a').text(show_hide_text[0]);
    $content.toggle();	// Toggle visible
    $(this).text(show_hide_text[+$content.is(':visible')]);	// Change text
  });
});
<!doctype html>
<html>
  <head>
    <title>StackOverflow Testing Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  </head>
  <body>
    <div>
      <h3>SUPER BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3>
      <div class="brand show-hide-content" id="brand-Super-brand">
        <div>PRODUCT #1</div>
      </div>
    </div>

    <div>
      <h3>MEGA BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3>
      <div class="brand show-hide-content" id="brand-Mega-brand">
        <div>PRODUCT #3</div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

ProgrammerV5
ProgrammerV5

Reputation: 1962

Just add a class to your LINK so you know if it is being shown or not. Also, you can use the "Starts With" from Jquery to identify objects that start with:

$("#YourLinkID").click(function(kind,value){

    //  Your previous code.
    //
    if($(this).hasClass("show"))
    {
        if($(this).html("Your HTML for Hide Link"));
        $(this).removeClass("show");
    }
    else
    {
        if($(this).html("Your HTML for Show Link"));
    }

    }
});

Haven't had a chance to test the code but you get the idea from it. If you still need it, please let me know and I'll try to make it a working example.

Upvotes: 0

Related Questions