CODEWITHSUNDEEP
jqueryhtml
Ronald Dekker
Ronald Dekker

Reputation: 25

jquery hide and show on different places

I use jquery to show text when a button is clicked. I want on the same page on another spot with another button showing a different text. My solution now is to create multiple scripts one for each div like this 

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a>
<div id='content1' style="display:none">  hide and show 1 </div>

<script>
jQuery(document).ready(function(){
        jQuery('#hideshow1').on('click', function(event) {        
             jQuery('#content1').toggle('hide');
        });
    });
</script>

And a copy of this all but then with 'hideshow2' and 'content2'

Now i need even a third hideshow3 but i can't figure out how to make this smarter with just one script.

Upvotes: 0

Views: 232

Answers (6)

gaetanoM
gaetanoM

Reputation: 42044

Why add classes to select elements? It's much more simple to use the jQuery selectors in the proper way.

A different approach, considering the "#contentx" element can be not consecutive is:

$(function () {
  // get all elements with the id starting with hideshow
  $('[id^="hideshow"]').on('click', function(event) {
    // find all content elements ending with the same
    // substring of the clicked element
    $('#content' + this.id.substr(8)).toggle('hide');
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a>
<div id='content1' style="display:none">  hide and show 1 </div>

<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show1' >Show me1 ! </a>
<div id='content2' style="display:none">  hide and show 1 </div>

<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show1' >Show me1 ! </a>
<div id='content3' style="display:none">  hide and show 1 </div>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

use jquery to show text when a button is clicked

You can link them with data- attributes. This way it doesn't matter if the elements are near each other and can be moved around in future without needing to rewrite the script.

<a class='hideshow' data-hideshow="1">Show me 1!</a>
<a class='hideshow' data-hideshow="2">Show me 2!</a>

<div class='content' data-hideshow="1" style="display:none">hide and show 1 </div>
<div class='content' data-hideshow="2" style="display:none">hide and show 2 </div>

Then your script works on classes and the attributes:

$(".hideshow").click(function() {
    var hideshow = $(this).data("hideshow");

    // Optional hide all other .content (not clear if this is required or not)
    $(".content").hide();

    // Show the relevant .content
    $(".content[data-hideshow=" + hideshow + "]").show();
});

The .hide()/.show() calls can be made more efficient by combining with .not() and other calls, but this shows the concept.

Upvotes: 0

Imran Saleem
Imran Saleem

Reputation: 370

$(document).ready(function() {
  $('.pure-button').on('click', function(event) {
    var id = $(this).attr('id');
    id = id.substring(8);
    $('#content' + id).toggle('hide');
  });
});

I think that code will help you, if the clicked button and display box have same numeric digit

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

i think you want to have a structure like button div button div button div . so use this

jsfiddle

JQ 

jQuery(document).ready(function(){
  jQuery(".pure-button").on('click', function(event) {        
    var show = $(this).next("div")
         $(show).toggle('hide');
    });
 });

HTML :

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a>
<div id='content1' style="display:none">  hide and show 1 </div>
<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show2' >Show me2 ! </a>
<div id='content2' style="display:none">  hide and show 2 </div>
<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show3' >Show me3 ! </a>
<div id='content3' style="display:none">  hide and show 3 </div>
<a class="pure-button pure-button-primary" type='button' id='hideshow4' value='hide/show4' >Show me4 ! </a>
<div id='content4' style="display:none">  hide and show 4 </div>

OR if your divs are not directly after the buttons, you could use data-target like so : jsfiddle

HTML :

<a class="pure-button pure-button-primary" type='button' id='hideshow1' data-target="#content1" value='hide/show1' >Show me1 ! </a>
<a class="pure-button pure-button-primary" type='button' id='hideshow2' data-target="#content2" value='hide/show2' >Show me2 ! </a>
<a class="pure-button pure-button-primary" type='button' id='hideshow3' data-target="#content3" value='hide/show3' >Show me3 ! </a>
<a class="pure-button pure-button-primary" type='button' id='hideshow4' data-target="#content4" value='hide/show4' >Show me4 ! </a>

<div id='content1' style="display:none">  hide and show 1 </div>
<div id='content2' style="display:none">  hide and show 2 </div>
<div id='content3' style="display:none">  hide and show 3 </div>
<div id='content4' style="display:none">  hide and show 4 </div>

JQ :

jQuery(document).ready(function(){
    jQuery(".pure-button").click(function() {        
    var show = $(this).data("target")
         $(show).toggle('hide');
    });
});

Upvotes: 0

Ivan Karaman
Ivan Karaman

Reputation: 1234

in link type attribute and value its bad...

$(document).ready(function(){
        $('a[id^="hideshow"]').on('click', function(event) {        
             $(this).next().toggle('hide');
        });
    });
a{ display: block; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="pure-button pure-button-primary" id='hideshow1'>Show me1 ! </a>
<div id='content1' style="display:none">  hide and show 1 </div>

<a class="pure-button pure-button-primary" id='hideshow2'>Show me2 ! </a>
<div id='content2' style="display:none">  hide and show 2 </div>

<a class="pure-button pure-button-primary" id='hideshow3'>Show me3 ! </a>
<div id='content3' style="display:none">  hide and show 3 </div>

Upvotes: 1

Jai
Jai

Reputation: 74738

Instead work with class names. That will not give you pain of writing same thing over and over again: 

jQuery(document).ready(function() {
  jQuery('.hideshow').on('click', function(event) {
    jQuery(this).next('.content').toggle('hide');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me1 ! </a>
<div class='content' style="display:none">hide and show 1</div><br>
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me2 ! </a>
<div class='content' style="display:none">hide and show 2</div><br>
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me3 ! </a>
<div class='content' style="display:none">hide and show 3</div>

Upvotes: 3

Related Questions