Jump to content

Populate Accordion Menu from MySQL


bravo14

Recommended Posts

Hi

 

I am trying to populate an Accorian Menu from data in a mysql database.  The Accorian menu is built up with the following code

 

<div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 1</div>
            <div class="AccordionPanelContent">Content 1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 2</div>
            <div class="AccordionPanelContent">Content 2</div>
          </div>
      </div>

 

I want it to look like the following

 

<div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Brides</div>
            <div class="AccordionPanelContent">Dresses</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Menswear</div>
            <div class="AccordionPanelContent">Content 2</div>
          </div>
      </div>

 

The data is stored in atable as follows:-

 

menu_id  menu  parent_menu_id 

      1        Brides            0

      2        Men's Wear    0

      3        Brides            1

 

Thanks in advance

 

Mark

 

Link to comment
Share on other sites

Sorry, the table should read

 

menu_id  menu  parent_menu_id 

      1        Brides            0

      2        Men's Wear    0

      3        Dresses            1

 

Link to comment
Share on other sites

You did not exactly state what part of this you need help with. Assuming you just need the query and can work out how to produce the correct output and that you only want to show tabs that have content under them, this query will work -

 

$query = "SELECT t1.menu AS tab, t2.menu AS label FROM your_table AS t1
INNER JOIN your_table AS t2 ON t2.parent_menu_id = t1.menu_id ORDER BY tab, label";

 

 

Link to comment
Share on other sites

Hi

 

I now have code of

<?php

mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db('wedding_buddy');
$menu = "SELECT t1.menu AS tab, t2.menu AS label FROM menus AS t1 INNER JOIN menus AS t2 ON t2.parent_menu_id = t1.menu_id ORDER BY tab, label";
if(mysql_num_rows($menu) < 1) 
{ 
   echo('There are no menu items'); 
} 
else 
{ 
   while($menu_row = mysql_fetch_array($menu))
    {
echo('<div class="AccordionPanel">');
echo('<div class="AccordionPanelTab">'.$menu_row[tab].'</div>');
echo('<div class="AccordionPanelContent">'.$menu_row[label].'</div>');
echo('</div>');
       }
}
?>

I have an error as follows:-

[code]
Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in C:\wamp\www\wedding_buddy\includes\menu.php on line 6
There are no menu items 

[/code]

Link to comment
Share on other sites

The menu is not displaying as I would like.

 

I want all of the subitems under 1 menu, for example if there is 5 items for 1 Main item there is one heading and 5 items underneath.

 

Mainmenu1

          Submenu 1

          Submenu 2

          Submenu 3

          Submenu 4

          Submenu 5

 

Mainmenu2

          Submenu 1

          Submenu 2

          Submenu 3

          Submenu 4

          Submenu 5

 

How do I need to change the code supplied previously?

Link to comment
Share on other sites

You would need to 'remember' the last tab value and do some special processing when the tab value changes (you'll need to adapt the $result variable in the following to match what your query is producing) -

<?php
$content = "<div id=\"Accordion1\" class=\"Accordion\" tabindex=\"0\">\n";
$last_tab = NULL; // remember the last tab value (start with a value it will never be)
while($row = mysql_fetch_assoc($result)){
if($last_tab != $row['tab']){
	// the tab changed
	if($last_tab != NULL){
		// it was not the first tab, close the previous tab
		$content .="\t</div>\n";
	}
	$last_tab = $row['tab']; // remember the new tab value
	// start a new tab
	$content .="\t<div class=\"AccordionPanel\">\n";
	$content .= "\t\t<div class=\"AccordionPanelTab\">{$row['tab']}</div>\n";
}
// output each label
$content .= "\t\t<div class=\"AccordionPanelContent\">{$row['label']}</div>\n";
}
// close the last tab
$content .= "\t</div>\n</div>\n";
echo $content;
?>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.