Jump to content

Jquery To Hide/show Divs Onclick!


Recommended Posts

Hi!

 

I'm testing a JQuery script to hide/show divs and it's working successfuly, and I consider this approch very nice to hide/show fields, because it does not cause any problem with alignment of the fields!

 

This solution as is requires we click in the respective weblink to show and hide the fields!

 

But I need to make a little change, I would like to trigger this function when the corresponding checkbox is checked, e.g. when the checkbox "x" is checked show div "x", and when it is unchecked hide div "x"!

 

The triggers to call this function would be the following:

 

1)  "Ir para o Trabalho" checkbox instead "Show/hide_1" weblink!
 
2)  "Ir para o Colégio/ Faculdade/ Pós Graduação" checkbox instead "Show/hide_2" weblink!
 

Please, could someone help me set these triggers?

 

My url page is: http://sa1.caspio.com/dp.asp?AppKey=58733000aac8a3fdae8b45deb24a

 

The script I'm using is the following:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
             $(".slidingDiv1").hide();
 
        $(".show_hide1").show();
 
    $('.show_hide1').click(function(){
 
    $(".slidingDiv1").slideToggle(); 
     
    });
});
 
</script>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
             $(".slidingDiv2").hide();
 
        $(".show_hide2").show();
 
    $('.show_hide2').click(function(){
 
    $(".slidingDiv2").slideToggle(); 
     
    });
});
 
</script>
 
Best!
 
Luiz
 
 
Link to comment
Share on other sites

Hi!

 

Fortunately I managed to solve the issue!

 

The mistake I was making was trying to use "class" instead of "id".

 

Now I understood that in this case, the reference to the HTML field is taken through the id property.

 

 

1) wrong way ==>>   $('.InsertRecordField_name').click(function(){  

 

 

2) Correct way ==>> $("#InsertRecordField_name").click(function(){

 

Ps: InsertRecord to submission forms and EditRecords to Update forms!

 

Regards!

 

Luiz

Link to comment
Share on other sites

  • 1 year later...

Never mind. Instead of showing/hiding the div, I used jquery to show/hide the text. Solved the issue.

 

If anyone ever needs it:

 

<script>

 
$(document).ready(function(){
        $('.moreinfo').hide();
        $('.more').click(function (ev) {
           var t = ev.target
           $('#info' + $(this).attr('target')).toggle(500, function(){
              $(t).html($(this).is(':visible')? 'I\'m done reading more' : 'Read more')
           });
           return false;
        });
});
</script>
 
<p class="moreinfo" id="info1">text text text text </p>
 
<a class="more" target="1">Read More</a> 
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...