Best way to accomplish content change..

[joetaylor]

Hello,

 

What would be the best way to accomplish what's being done on this page:

https://www.seedinvest.com/about-us

(specifically the 'how it works' section)

 

Basically you click the various content/circles and it changes the content below it.  I thought I might be able to do it with css, but maybe javascript or jquery would be better?

 

Thoughts?

 

Thanks,

 

-Joe

 

P.S. Note, I'm new to javascript/jquery..  but am learning.  

[codefossa]

Demo: http://lightron.tk/tmp/52/

 

We'll start with the HTML.  We'll use two BUTTONs and two DIVs.

<input type="button" class="change" rel="welcome" value="Hello" />
<input type="button" class="change" rel="goodbye" value="See Ya!" />

<div class="content" id="welcome">Hey!  Welcome to the page.</div>
<div class="content" id="goodbye">Come back soon.</div>

Lets jump over to some CSS now.  We want to hide the goodbye DIV by default.

#goodbye
{
    display: none;
}

Now lets add some Javascript.  I'm gonna use jQuery.

// Allow the page to load
$(document).ready(function()
{
    // Wait for a button to be clicked
    $(".change").click(function()
    {
        // We're gonna use the value of the rel attribute for the ID
        var item = $(this).attr("rel");
        
        // Hide all of our DIVs and show the one we want.
        $(".content").hide();
        $("#" + item).show();
    });
});

Edited July 8, 2013 by Xaotique

[joetaylor]

didn't get around to working on this until today..  just wanted to pop in and say thanks for that!  

[joetaylor]

I've got this working really well.  I worked out how to nest this and have background images in place of the buttons etc..   using css to create the hover effects over those images.  

 

But there's one thing for the life of me I can't figure out and I'm sure javascript/jquery is the answer.. there's probably just a line of code that I could add to what I have that would do it.  How can I make the image change onclick and stay that way until something else is clicked?

 

Closest I got was using CSS 'active' pseudo-class .. of course, my visitors would have to hold down their mouse button to keep it that way. lol

 

 

 

Edited July 20, 2013 by joetaylor

[joetaylor]

If this helps.. codes a bit messy as I've been messing around trying to figure this out...

<input type="submit" src="images/circle.png" class="change" rel="investors" value="For Investors" />
<input type="submit" src="images/circle.png" class="change" rel="companies" value="For Companies" />

<!-- starts FOR INVESTORS -->

<div class="content" id="investors">
<ul>
<li><input type="submit" class="change2" rel="investors1" value="Investors 1" /></li>
<li><input type="submit" class="change2" rel="investors2" value="Investors 2" /></li>
<li><input type="submit" class="change2" rel="investors3" value="Investors 3" /></li>
<li><input type="submit" class="change2" rel="investors4" value="Investors 4" /></li>
<li><input type="submit" class="change2" rel="investors5" value="Investors 5" /></li>
</ul>

<div class="content2" id="investors1"><h2>Step #1: TITLE</h2>
<ul>
<li><h3>HEADING</h3>
CONTENT</li>
<li><h3>HEADING</h3>
CONTENT</li>
<li><h3>HEADING</h3>
CONTENT</li>
</ul>
</div>
<div class="content2" id="investors2"><h2>Step #2: TITLE</h2></div>
<div class="content2" id="investors3"><h2>Step #3: TITLE</h2></div>
<div class="content2" id="investors4"><h2>Step #4: TITLE</h2></div>
<div class="content2" id="investors5"><h2>Step #5: TITLE</h2></div>

And the javascript...  pretty much following the above..

 

// JavaScript Document


// Allow the page to load
$(document).ready(function()
{
    // Wait for a button to be clicked
    $(".change").click(function()
    {
        // We're gonna use the value of the rel attribute for the ID
        var item = $(this).attr("rel");
        
        // Hide all of our DIVs and show the one we want.
        $(".content").hide();
        $("#" + item).show();
    });
});

// Allow the page to load
$(document).ready(function()
{
    // Wait for a button to be clicked
    $(".change2").click(function()
    {
        // We're gonna use the value of the rel attribute for the ID
        var item = $(this).attr("rel");
        
        // Hide all of our DIVs and show the one we want.
        $(".content2").hide();
        $("#" + item).show(); 
    });
});

Edited July 20, 2013 by joetaylor

[joetaylor]

I hate to keep updating my thread..  sorry.

 

But I just wanted to update it.  I actually figured out how to accomplish everything I needed.  I'm using a variety of different things to accomplish my end.

 

And everything was working perfect in all the major browsers accept...  IE.

 

In fact, I went back to the original code Xaotique posted and it doesn't work either.  

 

I tried to rule everything out including trying this on a different computer and nothing seems to work.

 

Does anyone know of any known bugs with IE and this code or why this would happen?  I can paste my exact code it needed..

 

Thanks a ton in advance! (going back to banging my head against the wall )

Edited July 20, 2013 by joetaylor

[joetaylor]

And...  my last update.  

 

If I actually used IE myself, I might have thought not to ignore the box at the bottom that told me it was blocking the script.  

 

It's working now that I unblocked it...

 

Thanks again for your help!