How to make collapsible divs or panels on a page with a form and 2 buttons.

cdlciddit
cdlciddit used Ask the Experts™
on
Hello. I am a newbie to programming. I'm working on a web form in asp.net. So my files are set up so that I have a Master page and aspx pages that look like this.
<%@ Page Title="" Language="VB" MasterPageFile="~/Layout.master" AutoEventWireup="false" CodeFile="delete.aspx.vb" Inherits="Appointment_Online_delete" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="wide" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

Open in new window



   I have everything built.  But on the form I want a collapsible panel.  I've tried all the basic tricks I know and nothing works.  I have no problem doing this on a page with only 1 button but this page will have 2.  One button to submit the form and the other button to expand a content div or panel.  No matter what I've tried when I click the button to expand the panel or div it doesn't do anything but jump to the top of the page and trigger all my form validators.  It seems like it tries to submit the form also.   Like I said, I've tried several different way to do it but this is the way I would like to do it if I can get it to work.

Here is the panel
<asp:Panel id="pnlfaq_content" runat="server" Visible="false">

Open in new window

As you see I start off with the visibility of false because I want the user to click the button to see the FAQ information.

This is my button.  I've tried different types of buttons but I think a asp linkbutton is what I need. Let me know if there is something better.
<asp:LinkButton ID="btnFAQ" runat="server" onclick="btnFAQ_Click" CssClass="btn b_g" Style="width: 80px;"><span>FAQ</span></asp:LinkButton>

Open in new window


I was hoping it would be so simple as to just add this in my code file .aspx.vb
Protected Sub btnFAQ_Click(sender As Object, e As EventArgs) Handles btnFAQ.Click
        pnlfaq_content.Visible = True
    End Sub

Open in new window

But this doesn't work.  It only sends to focus to the top of the page and triggers my form validators as if I was submitting the form.  

I would like some help in how to make this work.   Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
You need to implement client side code that will expand and collapse your div. If I were you, I would add some jQuery to expand and collapse the div.

Have a look at this link: jQuery simple collapsible div.

You will need to add jQuery to your page. The easiest is from a CDN or you could add it as a file reference. In any event, check out the jQuery CDN page for the link to the files needed.

Author

Commented:
Hello. Thank you for the quick response.  I think your solution will work.  I did try jQuery before but I couldn't get it to work. I assume it's because of the way I'm trying to import the jQuery library.  Since I'm using .net web forms and master pages I'm not sure exactly how to import jQuery.  Here is how I implemented it. But it still isn't working.  I tried using the inspector to see what the problem is but I'm not getting any console errors. So I'm not sure why it isn't working.  
<%@ Page Title="" Language="VB" MasterPageFile="~/Layout.master" AutoEventWireup="false" CodeFile="delete.aspx.vb" Inherits="Appointment_Online_delete" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
        .faq_content {
          display:none;
}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="wide" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="faq_section">
<h2>If you need clarification or additional information, we encourage you to contact us.</h2>
       <p class="show_content"><a href="#">Click here for FAQ</a></p>
         <div class="faq_content">
           <p>Here are all the FAQ questions</p>
      </div>

    <script type="text/javascript">
        $('.show_content').click(function(){
        $('.faq_content').slideToggle('slow');
        });
    </script>  
</asp:Content>
    </script>  

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
remove the onlcik attribute of your button :
<asp:LinkButton ID="btnFAQ" runat="server" CssClass="btn b_g" Style="width: 80px;"><span>FAQ</span></asp:LinkButton>

replace line 20 to 24 by :
    <script type="text/javascript">
        $('#<%= btnFAQ.ClientID %>,.show_content a').click(function(event) { // we trigger on the link AND p.show_content, remove one 
                    event.preventDefault(); // this is mainly your issue : https://api.jquery.com/event.preventDefault/
                    $('.faq_content').slideToggle('slow');
        });
    </script>  

Open in new window



<%@ Page Title="" Language="VB" MasterPageFile="~/Layout.master" AutoEventWireup="false" CodeFile="delete.aspx.vb" Inherits="Appointment_Online_delete" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
        .faq_content {
          display:none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="wide" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="faq_section">
<h2>If you need clarification or additional information, we encourage you to contact us.</h2>
       <!-- I believe you don't want both... anyway... remove one -->
       <asp:LinkButton ID="btnFAQ" runat="server" CssClass="btn b_g" Style="width: 80px;"><span>FAQ</span></asp:LinkButton>
       <p class="show_content"><a href="#">Click here for FAQ</a></p>
       <div class="faq_content">
           <p>Here are all the FAQ questions</p>
      </div>

    <script type="text/javascript">
        $('#<%= btnFAQ.ClientID %>,.show_content a').click(function(event) { // we trigger on the link AND p.show_content, remove one 
                    event.preventDefault(); // this is mainly your issue : https://api.jquery.com/event.preventDefault/
                    $('.faq_content').slideToggle('slow');
        });
    </script>  
</asp:Content>

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
I think the reference to jQuery needs to be added to your Master page called Layout.master. It needs to go in the <head> section. Here is a nice article on Using jQuery with an ASP.NET Master Page.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
It is possible to create a collapsible section without JavaScript using CSS and a hidden checkbox.

Let me know if you want to see a sample.

Author

Commented:
Hello @leakim971. Thanks for the code and the explanations.  You are right my main issue with trying to do it this way is importing the jquery library.  Even when I added these lines that I got from you:

<script type="text/javascript">
        $('#<%= btnFAQ.ClientID %>,.show_content a').click(function(event) { // we trigger on the link AND p.show_content, remove one 
                    event.preventDefault(); // this is mainly your issue : https://api.jquery.com/event.preventDefault/
                    $('.faq_content').slideToggle('slow');
        });
    </script>  

Open in new window

I still get an error in my console saying:
   consent_update.aspx:27 GET http://152.19.171.73/registry/autism/Scripts/jquery-ui-1.10.3.min.js net::ERR_ABORTED 404 (Not Found)

Author

Commented:
Hello @ Dirk Strauss.  I tried adding the reference to the Master page and I still got the same errors.  I'll try it again.  Thanks for the link.
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
It means that the site can't find the jQuery file at that location. Check the file name and / or path.

Author

Commented:
hello @Julian Hansen.  I tried using just CSS but I couldn't get that to work either.   First I tried to make the field hidden when the page loads.

 <style type="text/css">
        .faq_content {
          display:none;
}
    </style>

Open in new window


Then I tried to change that to block. But it didn't work for me.  I would appreciate a link. It may help.

Author

Commented:
Hello @Dirk Strauss.  I don't have the jQuery  file saved locally.  I've always used the Google one (<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>).  Should I download and use a local one?
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
The 404 was on this file referenced
GET http://152.19.171.73/registry/autism/Scripts/jquery-ui-1.10.3.min.js net::ERR_ABORTED 404 (Not Found)

Open in new window

I usually reference the CDN, but as an interim fix, download the minified file and reference locally to see if the errors go away.
leakim971Multitechnician
Top Expert 2014

Commented:
don't put the protocol to avoid any error later :

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ....

Open in new window


just google for "cdn jquery"
like this one : https://cdnjs.com/libraries/jquery/
I choose one version and I can get the full script tag to copy/paste
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Expandable div without JavaScript
HTML
  <label for="option1">I love your themes, can I use them on my WordPress site?</label>
  <input type="checkbox" class="expander" id="option1">
  <div class="dropdown">No, you can only install our themes on a self-hosted WordPress site</div>
  
  <label for="option2">Some other deep question?</label>
  <input type="checkbox" class="expander" id="option2">
  <div class="dropdown">No, you can only install our themes on a self-hosted WordPress site</div>
  
  <label for="option3">What is the answer to life the universe and everything?</label>
  <input type="checkbox" class="expander" id="option3">
  <div class="dropdown">42</div>

Open in new window

CSS
label {
  display: block;
  padding: 15px;
  background: lightgrey;
  cursor: pointer;
}
.dropdown {
  max-height: 0;
  overflow-y: hidden;
}
.expander:checked + .dropdown {
  max-height: 100px;
 
  transition-property: all;
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.expander {
  display: none;
}

Open in new window

Working sample here

Author

Commented:
Hello @leakim971.  I think I was able to import the jQuery library by adding it back to my master page.  Only because now I'm not getting an error on the CDN.  But it still doesn't recognize it as jQuery.  I tried doing these  options:

This is in the head of my master page.  And when I do this I don't get any errors on finding the CDN.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Open in new window


Then I go to the web form page and added this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        $('#<%= btnFAQ.ClientID %>,.show_content a').click(function(event) { // we trigger on the link AND p.show_content, remove one 
                    event.preventDefault(); // this is mainly your issue : https://api.jquery.com/event.preventDefault/
                    $('.faq_content').slideToggle('slow');
        });
    </script> 

Open in new window

I also tried that script with this in the tag but it also did not work.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Open in new window


Here is the link button that I am trying to use to trigger that script.
<asp:LinkButton ID="btnFAQ" runat="server" CssClass="btn b_g" Style="width: 80px;"><span>FAQ</span></asp:LinkButton>

Open in new window


But once I save the page and try to click the button with the id "btnFAQ" it doesn't seem to run the script.  All it does is jump to the form at the bottom of the page and triggers all of my required field validators.   I am also not getting any errors in the console so I don't know where to look for the problem.

Author

Commented:
Hello @Dirk Strauss.  I think I was able to figure out how to import the CDN because I'm not getting an error on that but I still don't think it is recognizing it as JQuery.  It doesn't recognized the $ as syntax.  I tried using both these script tags:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Open in new window

and
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Open in new window

Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
Try adding your script (the jQuery you want to run) in the ready method. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. Your CDN reference must load before any jQuery script on the page. So put the CDN reference to jQuery in your Masterpage and add the jQuery script to hide and show your div's on the child page in this script at the bottom of your page.
$(function() {
  // Handler for .ready() called.
});

Open in new window

See this page as reference.
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:

Author

Commented:
Hello @Julian Hansen.  I think this worked.  It only displayed the 1st line of text. It's a FAQ so it has about 20 lines of text.  So should I make the div a max height or a min height?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can set that value quite high - it should transition to the height of the text.

I have updated the sample to add a long paragraph sample. I upped the max-height to 500px - as you can see from the sample each div opens to its natural height.

http://www.marcorpsa.com/ee/t3529.html

Author

Commented:
Hello @Julian Hansen. Thank you for that last example.  It showed a lot more text.  I was able to edit the max-height to get it to work.  That example worked for me.  Thanks for your help.

Author

Commented:
Hello @Dirk Strauss and @leakim971.  What worked best for me was just to use CSS that @Julian Hansen sent,  since I wasn't able to get the jQuery CDN to work.  I think the jQuery code that you guys sent would have worked. I just couldn't figure out how to import the CDN correctly.  Thank you for help.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start Today