Hi,
I am trying to add a Views block to a JQuery Accordion script I have on my page. This is the code for the JQuery Accordion:



.msg_list { list-style: none; margin: 0; margin-bottom: 1em; padding: 0; width: 180px; } .msg_head { padding: 0px 10px; cursor: pointer; position: relative; background-color:#EEE; margin:1px; color: #000000; text-align: center; font-weight: bold; } .msg_body { padding: 5px 10px 15px; background-color:#ffffff; }


$(document).ready(function() { //hide the all of the element with class msg_body $(".msg_body").hide(); //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked $("#firstpane p.msg_head").click(function() { $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow"); }); //slides the element with class "msg_body" when mouse is over the paragraph $("#secondpane p.msg_head").mouseover(function() { $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow"); }); });

Current Areas Covered

San Francisco
  • SFSU
  • USF/Panhandle
  • Haight Street
  • Outer Sunset
  • Union Square

    • Today's Events

    orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

    New Spots For Rent

    TESTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT

    New Forum Topics

    orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

    Active Forum Topics

    orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit



    I want to add the Views block code to the "msg_body" div classes. What code do I need to add to have a Views block displayed in these divs?

    *note - I do not want to use the Views Accordion module because some of the content I have included in the JQuery Accordion is not a Views block.

    Thanks so much for the help!

    Comments

    mxer269’s picture

    mxer269 commented

    Sorry, here's the correct code from the first post (I forgot to add an /code tag)

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

.msg_list {
	list-style: none;
	margin: 0;
margin-bottom: 1em;
	padding: 0;
	width: 180px;
}
.msg_head {

	padding: 0px 10px;
	cursor: pointer;
	position: relative;
	background-color:#EEE;
	margin:1px;
color: #000000;
text-align: center;
font-weight: bold;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color:#ffffff;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
	//hide the all of the element with class msg_body
	$(".msg_body").hide();
	//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked 
	$("#firstpane p.msg_head").click(function()
    {
		$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");	
	});
	//slides the element with class "msg_body" when mouse is over the paragraph
	$("#secondpane p.msg_head").mouseover(function()
    {
	     $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
	});
});
</script>
<div style="float:left; margin-left:0px;"> <!--This is the second division of right-->

  <div class="msg_list" id="secondpane">
		<p class="msg_head">Current Areas Covered</p>
		<div class="msg_body">
			<b>San Francisco</b>
<li>SFSU</li>
<li>USF/Panhandle</li>
<li>Haight Street</li>
<li>Outer Sunset</li>
<li>Union Square</li>
		</div>
		<p class="msg_head">Today's Events</p>
		<div class="msg_body">
			orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
		</div>

		<p class="msg_head">New Spots For Rent</p>
		<div class="msg_body">
			TESTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT	
</div>
		<p class="msg_head">New Forum Topics</p>
		<div class="msg_body">
			orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
		</div>
		
		<p class="msg_head">Active Forum Topics</p>
		<div class="msg_body">
			orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
		</div>
		
	</div>
</div>
</body>
</html>

    note* - I am not using the Views Accordion module because some of the content included in my JQuery Accordion script is not part of a view.

    What code do I need to add to the msg_body to display a views block?

    Thanks so much for the help!

    dawehner’s picture

    dawehner
    Primary language German
    commented

    What part is not part of a view, perhaps you can do it as view, and use then the Views Accordion block.

    Where comes the Content of msg_body? Perhaps it can be included into views.

    mxer269’s picture

    mxer269 commented

    I can't get the Views Accordion module to work on my theme.. I don't understand why because it works when I switch to to the Garland theme. What confuses me more is that JQuery scripts work fine on my theme I don't get why the Views Accordion and Collapsiblock module won't work!

    Is there any way to just add the Views block code to the Jquery script I have so I can simply add it to that script?

    As far as your questions.. some of the information that I want to include won't change.. so it's not part of a View.

    the msg_body content can be whatever..

    dawehner’s picture

    dawehner
    Primary language German
    commented

    OK, do you have some views custom theming?
    I think views accordion uses some specific classes of the views output.

    Perhaps just a downloadable version without css.

    Your Output does not look like views output.

    esmerel’s picture

    esmerel commented
    Status: Active » Closed (fixed)

    No response to request for more info