Search code examples
jqueryhtmlcssincludeslim-lang

jquery DOM with .slim file include

When a user hovers over '.arrow img':

  1. I'm trying to hide/edit the code inside the div '#page1' so that it's blank.

  2. And edit the code inside the div '#page2' so that it's 'include page2'

However, so far it's just adding it as text (printing "include page2" onto the page).

I've been trying .append, .appendTo, .html.

jquery file:

$(document).ready(function(){
    $('.arrow img').mouseover(function(){
        //$("#page1").[the code edit function (I don't know it)]
        $( "#page2" ).append( "include page2-pg" );
    });
});

html/slim:

div id="page1"
    include page1-pg
div id="page2"
    div id="page2-pg"

for those who don't know slim I translated it into html and made a fiddle (if that'll help any...): https://jsfiddle.net/y7q6ca3d/2/

I just used a random picture for the up arrow, though I have it in the file on my pc. There's no problem with the hover function, just that it only adds the line in text instead of as code..

Thanks!

Solution

  • Instead of adding 'include...' to index.slim, I just made sure that the 'include...' was already there, but hidden with .hide() in the js file.

    Then when arrow is .mouseover, I used .hide() on page1 and .show() on page2.