Solved

ASP Accordion output display

Posted on 2014-09-03
16
335 Views
Last Modified: 2014-09-13
ASP classic
Nested Accordion Style.

I have 5 pages that I would like to convert to accordion style display.

Testing code

Wrote a sample output file in asp code.  (outmusicalbums.asp)
<ul class="accordion" id="acc1">
<li>
</li>
<li>
<h4> Led Zeppelin</h4>
<div class='inner'>
<ul>
<li>
<h5>BBC Sessions</h5>
<div class="inner">
<li>
<div class="inner">
<h6>1-01-BBC Sessions-You Shook Me</h6>
<h6>1-02-BBC Sessions-I Cant Quit You Baby</h6>

</div></li>
<li>
<h5>Black Dog</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Box Set</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Coda</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Houses of the Holy</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>How the West Was Won</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin II</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin III</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin IV</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Mothership (Remastered)</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Physical Graffiti</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Presence</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Rare Finds</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>The Song Remains the Same</h5>
<div class="inner">
<ul>
</ul>
</div></li>
</ul>
</div>
</li>
<ul>
</ul>
 

Open in new window


This test page includes the file above (musicAccordionX.asp)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Music Accordion</title>
  <link rel="stylesheet" href="css/accordion.css"/>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.nestedAccordion.js"></script>
  <script type="text/javascript">
<!--//--><![CDATA[//><!--
$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow: "#current", iconTrigger: true});
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow: "div.outer:eq(1)",
      iconTrigger: true
  });
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow: "div.shown",
      iconTrigger: true
    });
  $("html").removeClass("js");
});
//--><!]]>
</script>
<!--<![endif]-->
<script type="text/javascript" src="js/GA-MP3.js"></script>
</head>
<body>
    <div id="wrapper">
        <p style="margin-left:0"><a href="http://www.tomsmp3.com" style=
        "padding:3px 5px; border:none;">BACK</a></p>

        <div id="content">
            <h1 class="heading">List All MP3 Songs</h1>

            <div id="container">
                <div id="main">
                    <h2>Toms MP3</h2>
                  <h3>Accordion By Artists</h3>
                    <!-- ********************* Accordion 1 ********************* -->
                    <!-- #include virtual="/outMusicAlbums.asp" -->  
                    <br>
                    <p style="clear:both; padding-bottom:20em"><a href="#lenta"
                    style="display: block; margin: 1em 0 7em; border-width: 1px;">^TOP</a></p>
                </div>
            </div>
        </div>
    </div>  
</html> 

Open in new window



The H6 does not expand or collapse properly I must refresh the page.
When I collapse H5 and H4 they work.

Also H6 font is very small

 
eventually this will be code that will build the included file from my sql database.

I created the outmusicalbums.asp because it is easier for me to test this way

Any ideas or suggestions are welcome.

Thanks

Tom
0
Comment
Question by:Thomas Grassi
  • 9
  • 6
16 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40302604
Is this what you are using?  http://www.adipalaz.com/experiments/jquery/nested_accordion_demo.html

or you could use jquery ui  http://jqueryui.com/accordion/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

Open in new window

Looking at the code, you really just need the div
0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40302627
Scott

Check this out http://www.tomsmp3.com/musicaccordionX.asp

Being playing with outmusicallbums.asp cant figure it out.

<ul class="accordion" id="acc1">
<li>
</li>
<li>
<h4> Led Zeppelin</h4>
<div class='inner'>
<ul>
<li>
<h5>BBC Sessions</h5>
<div class="inner">
<li>
<div class="inner">
<Li>1-01-BBC Sessions-You Shook Me</li>
<Li>1-02-BBC Sessions-I Cant Quit You Baby</Li>

</div></li>
<ul>
<li>
<h5>Black Dog</h5>
<div class="inner">
<Li>
<div class="inner">
<Li>01-Black Dog-Black Dog (Rare Acoustic)</li>

</div></li>
<li>
<h5>Box Set</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Coda</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Houses of the Holy</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>How the West Was Won</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin II</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin III</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Led Zeppelin IV</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Mothership (Remastered)</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Physical Graffiti</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Presence</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>Rare Finds</h5>
<div class="inner">
<ul>
</ul>
</div></li>
<li>
<h5>The Song Remains the Same</h5>
<div class="inner">
<ul>
</ul>
</div></li>

</div>
</li>
<ul>
</ul>
 

Open in new window


I got the example from   http://jqueryui.com/accordion/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40303138
The first place to start is validating your output.  http://validator.w3.org/

It looks like you have some tags that are not closed.  It's probably from your outMusicAlbums file.
0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40304872
Scott

Cool Site thanks

Since I am including the code in one asp page how do I count the numbers?

Also Just modified the code again

The validator shows many mismatches.

Should I place the code in the main page ?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40305705
For numbered lists, you want an ordered list and not an unordered list  http://www.w3schools.com/html/html_lists.asp. Basically, the <li> tags are childs of <ol> instead of <ul>

>The validator shows many mismatches.
Make sure you are only using rendered html.  You may need to fix your asp to output the correct html.

Let's try and keep this question on point and work with your accordion.    It is possible that invalid code is not the issue, but that is the first thing that needs to be addressed.  

Since part of the issue is missing end tags, it will help if your code was neatly written.   You can use htmltidy to help with that http://infohound.net/tidy/  The code below is exactly the same top and bottom.  It is hard to spot the error on the top (which is similar to your output) vs the bottom.  That is what htmltidy will do for you.
<div>
<div><div>
<div>
</div></div>
</div>

Open in new window

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

Open in new window

0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40306187
Scott

I took a small sample and created a new page

http://www.tomsmp3.com/musicaccordiont.asp

check that out.
0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40306834
Scott

Been trying to clear up the errors form the site you gave me no luck

Every time I change one something else goes wrong.

here is my current test code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Music Accordion</title>
  <link rel="stylesheet" href="css/accordion.css"/>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.nestedAccordion.js"></script>
  <script type="text/javascript">
<!--//--><![CDATA[//><!--
$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow: "#current", iconTrigger: true});
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow: "div.outer:eq(1)",
      iconTrigger: true
  });
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow: "div.shown",
      iconTrigger: true
    });
  $("html").removeClass("js");
});
//--><!]]>
</script>
<!--<![endif]-->
<script type="text/javascript" src="js/GA-MP3.js"></script>
</head>
<body>
    <div id="wrapper">
        <p style="margin-left:0"><a href="http://www.tomsmp3.com" style=
        "padding:3px 5px; border:none;">BACK</a></p>

        <div id="content">
            <h1 class="heading">List All MP3 Songs</h1>

            <div id="container">
                <div id="main">
                    <h2>Toms MP3</h2>
                  <h3>Accordion By Artists</h3>
                    <ul class="accordion" id="acc1">


<li>
</li>
<li>
<h4> Led Zeppelin</h4>
<div class='inner'>

<li>
<h5>BBC Sessions</h5>
<div class="inner">

<Li>1-01-BBC Sessions-You Shook Me</li>
<Li>1-02-BBC Sessions-I Cant Quit You Baby</Li>
<Li>1-03-BBC Sessions-Communication Breakdown</Li>


<li>
<h5>Black Dog</h5>
<div class="inner">

<Li>01-Black Dog-Black Dog (Rare Acoustic)</li>

                    <br>
                    <p style="clear:both; padding-bottom:20em"><a href="#lenta"
                    style="display: block; margin: 1em 0 7em; border-width: 1px;">^TOP</a></p>

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

Open in new window


What am I missing?

Thanks
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40307619
Scott

The site tells me I have 17 errors

But in Microsoft Expression Web 4 which is what I use to code I have no errors.

The Page is displaying in the correct format.

Just the accordion function not working properly.

My current code is this now

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Music Accordion</title>
  <link rel="stylesheet" href="css/accordion.css"/>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.nestedAccordion.js"></script>
  <script type="text/javascript">
<!--//--><![CDATA[//><!--
$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow: "#current", iconTrigger: true});
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow: "div.outer:eq(1)",
      iconTrigger: true
  });
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow: "div.shown",
      iconTrigger: true
    });
  $("html").removeClass("js");
});
//--><!]]>
</script>
<!--<![endif]-->
<script type="text/javascript" src="js/GA-MP3.js"></script>
</head>
<body>
    <div id="wrapper">
        <p style="margin-left:0"><a href="http://www.tomsmp3.com" style=
        "padding:3px 5px; border:none;">BACK</a></p>

        <div id="content">
            <h1 class="heading">List All MP3 Songs</h1>

            <div id="container">
                <div id="main">
                    <h2>Toms MP3</h2>
                  <h3>Accordion By Artists</h3>
                    <ul class="accordion" id="acc1">


<li>
</li>
<li>
<h4> Led Zeppelin</h4>
<div class='inner'>
<ul>
<li>
<h5>BBC Sessions</h5>
<div class="inner">
<li>
<ul>
<div class="inner">
<Li>1-01-BBC Sessions-You Shook Me</li>
<Li>1-02-BBC Sessions-I Cant Quit You Baby</Li>
<Li>1-03-BBC Sessions-Communication Breakdown</Li>
</div>
<ul>
<li>
<h5>Black Dog</h5>
<div class="inner">
<li>
<ul>
<div class="inner">
<Li>01-Black Dog-Black Dog (Rare Acoustic)</li>
</div>

                    <br>
                    <p style="clear:both; padding-bottom:20em"><a href="#lenta"
                    style="display: block; margin: 1em 0 7em; border-width: 1px;">^TOP</a></p>

 </ul>
 </li>
 </div>
 </ul>
 </ul>
 </div>
 </ul>
 </div>
 </ul>
 </div>
 </div>
 </div>
 </div>
                    

Open in new window



Check it out     http://www.tomsmp3.com/musicaccordiont.asp

Top level expands ok just the next level down does not try it out and you will see what I mean.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40307768
It looks like you are using the wrong code.  The sample for accordion 2 is using the id acc2  and code
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow : "div.shown",
      elToWrap: "sup, img"
    });

Open in new window

http://www.adipalaz.com/experiments/jquery/nested_accordion_demo.html

You are using
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow: "div.outer:eq(1)",
      iconTrigger: true
  });

Open in new window

0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40307845
Scott

I changed Line 52                     <ul class="accordion" id="acc1">
to                          <ul class="accordion" id="acc2">


Same results.

BBC Sessions does not expand or close as does Led Zeppelin

The examples work but I can not figure what I am doing wrong
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40307860
What I would do is get the example to work first.  Then replace the data with yours.  Keep the same id's, classes and tags, but replace with your data.  I can see that yours does not match the sample and that is probably the issue.  

Notice the classes and structure below compared to what you have.
<h3>Accordion 1 - Nested Lists + Headings + DIVs</h3>
                    <p>Activated whenever a 'click' event occurs. The first sub-section is expanded when the page loads.</p>  
                    <ul id="acc1" class="accordion">
                      <li>
                        <h4>Heading 1</h4>
                        <div class="inner">
                          <ul>
                            <li>
                              <h5>Heading a</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                            <li>
                              <h5>Heading b</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                            <li>
                              <h5>Heading c</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </li>
                      <li>

Open in new window

0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40307961
Scott

I was thinking the same thing

I did that and got the sample working

I then changed the H4 and H5 to my values.

here is the current code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Music Accordion</title>
  <link rel="stylesheet" href="css/accordion.css"/>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.nestedAccordion.js"></script>
  <script type="text/javascript">
<!--//--><![CDATA[//><!--
$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow: "#current", iconTrigger: true});
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow: "div.outer:eq(1)",
      iconTrigger: true
  });
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow: "div.shown",
      iconTrigger: true
    });
  $("html").removeClass("js");
});
//--><!]]>
</script>
<!--<![endif]-->
<script type="text/javascript" src="js/GA-MP3.js"></script>
</head>
<body>
    <div id="wrapper">
        <p style="margin-left:0"><a href="http://www.tomsmp3.com" style=
        "padding:3px 5px; border:none;">BACK</a></p>

        <div id="content">
            <h1 class="heading">List All MP3 Songs</h1>

            <div id="container">
                <div id="main">
                    <h2>Toms MP3</h2>
                  <h3>Accordion By Artists</h3>
                    <ul class="accordion" id="acc1">

                      <li>
                        <h4>Led Zeppelin</h4>
                        <div class="inner">
                          <ul>
                            <li>
                              <h5>BBC Sessions</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                            <li>
                              <h5>Black Dog</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                            <li>
                              <h5>Box Set</h5>
                              <div class="inner">
                                  <p>
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                                  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                  </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </li>
                      <li>


                    <br>
                    <p style="clear:both; padding-bottom:20em"><a href="#lenta"
                    style="display: block; margin: 1em 0 7em; border-width: 1px;">^TOP</a></p>

 </ul>

 </ul>

 </div>

 </div>

 </div>
 </div>
         

Open in new window



Under each H5 I need a list of all the songs for that album which is the H5

The current code has a <p>   bla bla bla </p>  That is a paragraph  correct?
How would I add Line items

M:\Music\mp3musicalbums\Led Zeppelin\BBC Sessions\1-01-BBC Sessions-You Shook Me.mp3


I thought <Li> would do that ? but that was how I had it before?

check my code out http://www.tomsmp3.com/musicaccordiont.asp
0
 
LVL 23

Author Closing Comment

by:Thomas Grassi
ID: 40308046
Scott

Got it working

Now on to the next stage

Will post another question later.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40308128
Great job trouble shooting your own code!
0
 
LVL 23

Author Comment

by:Thomas Grassi
ID: 40321285
Scott

Just posted another question could use your help on.

http://www.experts-exchange.com/Programming/Languages/Scripting/ASP/Q_28517917.html

Thanks
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now